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排版 约定 
本 书 使 用 了 下 列 排版 约定 。 
。 实体 

表示 新 术语 。 


。 等 宽 字 体 (constant width) 
表示 程序 片段 ， 以 及 正文 中 出 现 的 变量 、 函 数 名 、 数 据 库 、 数 据 类 型 、 环 境 变 量 、 话 
句 和 关键 字 等 。 








。 等 宽 斜 体 (constant width bold) 
表示 应 该 由 用 户 输入 的 值 或 根据 上 下 文 确定 的 值 替 换 的 文本 。 


使 用 示例 代码 

本 书 的 补充 资料 (示例 代码 、 练 习 等 ) 可 以 从 https://github.com/cfjedimaster/DataStorageBook 
下 载 。 

本 书 是 要 帮 你 完成 工作 的 。 一 般 来 说 ， 如 果 本 书 提供 了 示例 代码 ， 那 么 你 可 以 把 它 用 在 你 
的 程序 或 文档 中 。 除 非 你 复制 了 很 大 一 部 分 代码 ， 否 则 无 需 联 系 我 们 获得 许可 。 比 如 ， 用 
本 书 的 几 个 代码 片段 写 一 个 程序 就 无 需 获得 许可 ， 销 售 或 分 发 O'Reilly 图 书 示例 的 光盘 则 
需要 获得 许可 ，3| 用 本 书 中 的 示例 代码 回答 问题 无 需 获 得 许可 ， 将 书 中 大 量 的 代码 放 到 你 
的 产品 文档 中 则 需要 获得 许可 。 

我 们 很 希望 但 并 不 强制 要 求 你 在 引用 本 书 内 容 时 加 上 引用 说 明 。 引 用 说 明 一 般 包 括 书 名 、 
作者 、 出 版 社 和 ISBN。 比 如 : “Client-Side Data Storage by Raymond Camden (O’Reilly). 
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第 1 章 


客 尸 端 数 据 存储 概述 





过 去 十 年 中 ， 浏 览 器 已 经 发 展 成 为 一 个 强大 的 工具 。 这 是 一 个 缓慢 的 过 程 ， 伴 随 着 许多 成 
长 之 痛 。 现 在 ， 增 强 型 布局 控件 、3D 图 形 和 游戏 ， 其 至 是 音乐 都 可 以 在 小 而 古老 的 浏览 
器 中 实现 。 客 户 端 数据 存储 是 一 个 更 加 令 人 兴奋 的 特性 ， 虽 然 相 比 之 下 ， 它 没 那 么 华丽 
(没有 别 的 意思 ) 。 但 我 们 为 什么 这 样 说 呢 ? 





浏览 Web 的 “经 典 ” 过 程 从 一 开始 就 没有 变 过 : 浏览 器 请 求 一 个 URL，Web 服务 器 返回 
请 求 的 内 容 ， 然 后 浏览 器 请 求 更 多 的 内 容 ， 而 服务 器 则 返回 更 多 的 内 容 。 








当然 ， 你 可 以 引入 JavaScript 和 AJAX， 让 情况 更 复杂 一 些 。 但 是 ， 即 使 是 在 精心 设计 的 
Web 2.0 应 用 程序 中 ， 浏 览 器 还 是 会 一 次 又 一 次 地 向 服务 器 请 求 信息 。 之 所 以 会 这 样 ， 是 
因为 浏览 器 (似乎) 很 健忘 。 它 知道 的 所 有 东西 都 必须 从 服务 器 习 得 。 

虽然 一 般 而 言 确实 如 此 ， 但 这 忽视 了 一 个 功能 强大 的 替代 方案 : 将 数据 存储 在 浏览 器 中 ， 
让 它 可 以 跳 过 向 服务 器 请 求 信息 的 过 程 ， 而 只 从 用 户 的 本 地 机 器 上 获取 数据 。 它 甚至 还 可 
以 操作 那些 数据 ， 用 于 任何 合理 的 用 途 。 数 据 可 以 稍 后 被 发 回 服务 器 用 于 更 新 。 
































总 之 ， 这 让 浏览 器 可 以 拥有 如 下 能 


。 直接 访问 数据 。 虽 然 使 用 AJAX 获取 数据 的 速度 通常 已 经 快 了 很 多 ， 但 将 数据 存储 在 本 
地 机 器 上 会 让 数据 访问 速度 更 快 。 

。 市 省 网 络 流 量 。 神 览 器 获取 一 次 数据 ， 只 要 有 用 就 一 直 保 存 着 ， 而 不 必 不 断 地 从 服务 器 
获取 数据 。 这 能 够 减轻 服务 器 的 压力 。 

。 减轻 服务 器 的 压力 。 如 果 服 务 器 不 断 地 响应 请 求 ， 并 从 数据 库 服务 器 获取 数据 ， 那 么 服 
务 器 会 负担 过 重 。 减 少 请 求 次 数 ， 可 以 减少 服务 器 的 工作 量 。 




















。 最 后 ， 数 据 存储 在 本 地 ， 这 使 创建 完全 离线 的 应 用 程序 变 得 更 加 可 行 。 
当然 ， 并 非 一 切 都 如 此 美好 。 将 数据 转移 到 浏览 器 也 有 以 下 几 点 不 足 。 


。 没有 任何 同步 支持 。 设 想 一 下 ， 你 已 经 将 数据 从 服务 器 复制 到 了 浏览 器 。 如 何 处 理 数据 

同步 呢 ? 如 果 出 现 冲 突 会 怎样 ? 本 书 所 谈 及 的 核心 技术 ， 没 有 一 项 支持 任何 有 关 同 步 处 

理 的 概念 。 不 过 ， 你 会 发 现 ， 像 PouchDB (http://www.pouchdb.com) 这 样 的 库 内 置 了 

同步 功能 。 

。 存储 限制 模糊 。 作 为 开发 人 员 ,我 们 讨厌 模糊 。 我 们 希望 准确 地 知道 可 以 使 用 多 少 资源 。 
遗憾 的 是 ， 对 于 本 书 将 要 谈 及 的 许多 技术 而 言 ， 这 些 限制 (以 及 打破 限制 的 后 果 ) 有 点 
模糊 。 

。 最 后 ,虽然 本 书 谈 及 的 技术 功能 非常 强大 ， 但 它们 并 不 能 取代 纯正 的 数据 库 服 务 器 。 数 
据 库 服务 器 针对 处 理 大 量 数据 的 任务 进行 了 特别 仔细 的 优化 ,并 提供 了 查找 数据 的 方法 。 
本 书 将 要 谈 及 的 方案 无 疑 能 够 存储 数据 ， 但 它们 并 不 像 一 个 戏 入 式 Oracle 服务 器 。( 虽 
然 这 可 能 是 一 件 好 事 。) 


本 书 将 讨论 各 种 客户 端 存储 技术 。 对 于 每 一 种 技术 ， 本 书 还 会 清楚 公正 地 讨论 它们 实际 上 
得 到 了 多 大 程度 的 支持 。 你 将 会 看 到 API 示例 以 及 演示 程序 ， 它 们 可 以 帮助 你 学 习 如 何 使 
用 API。 最 后 ， 我 们 将 看 儿 个 则 在 简化 客户 端 存 储 的 库 。 做 好 准备 ， 让 我 们 浏览 一 些 更 为 
实用 的 Web 特性 ， 这 将 是 一 段 有 趣 但 时 而 艰难 的 旅途 。 



















































































第 2 章 
使 用 Cookie 





2.1 真 的 要 讨论 Cookie 吗 


在 一 本 有 关 现 代 Web 开发 的 书 里 讨论 Cookie， 我 真是 有 点 不 好 意思 ， 但 是 ， 这 是 开发 人 
员 如 今 可 以 使 用 的 最 古老 、 最 稳定 的 客户 端 存储 形式 。 当 然 ，Cookie 不 是 最 好 的 方法 ， 我 
几乎 从 来 不 建议 使 用 它 ， 但 它 是 一 种 选择 ， 在 将 来 的 某 个 时 候 ， 你 也 许 不 得 不 使 用 (或 修 
改 ) 应 用 了 Cookie 的 代码 。 








Cookie 于 1994 年 在 Netscape 浏览 器 的 一 个 Beta 版 本 中 被 引入 。 它 通过 随 HTTP 请 求 和 响 
应 一 起 发 送 的 HTTP header 值 发 挥 作用 。 众 所 周知 ， 每 当 浏 览 器 请 求 一 个 资源 ， 就 会 有 一 
组 header 随 请 求 一 起 发 送 。 那 些 header 包含 各 种 类 型 的 数据 ， 其 中 包括 有 关 浏 览 器 的 信息 
以 及 它 需 要 的 数据 形式 。 反 过 来 ， 服 务 器 也 会 往 回 发 送 header。 基 本 上 ， 每 次 你 en | 览 
器 泻 染 一 个 Web 页 面 ， 就 有 一 组 你 看 不 到 的 header 被 发 送 。( 当 然 ， 你 可 以 使 用 浏览 器 

有 具 查看 它们 。 它 们 并 没有 被 隐藏 得 “无 法 看 到 ”， 只 是 在 默认 情况 下 看 不 到 。) 


























Cookie 使 用 HTTP header 发 送 ， 具 体 来 说 是 名 为 “Cookie” 的 HTTP header， 由 浏览 器 发 
送 到 服务 器 ， 又 从 服务 器 发 送 到 浏览 器 。 你 会 发 现 这 里 有 个 问题 。 如 果 使 用 客户 端 存储 的 
一 个 好 处 是 不 用 通过 网 络 发 送 数据 ， 那 么 来 回 发 送 Cookie 不 是 反 其 道 而 行 之 吗 ? 完全 正 
确 。 这 就 是 我 通常 不 建议 使 用 Cookie 的 另 一 个 原因 。 

















默认 情况 下 ， 浏 览 器 没有 限制 它 可 以 拥有 的 Cookie 数量 。 以 前 ， 每 个 域名 最 多 只 能 有 20 
个 Cookie， 但 如 今 的 浏览 器 似乎 已 经 去 掉 了 这 个 限制 。( 顺 便 说 一 句 ， 我 曾经 在 Chrome 浏 
览 嚣 中 设置 了 400 多 个 Cookie， 它 仍然 可 以 正常 运行 。 不 过 ， 当 它 发 出 请 求 时 ，Web 服务 








器 开始 抛 出 错误 。 因 此 ， 这 种 情况 是 Web 服务 器 有 限制 的 问题 ， 而 不 是 浏览 器 本 身 有 限 
制 。 但 请 不 要 使 用 400 个 Cookie。) 研究 (或 者 说 Google 搜索 结果 ) 表明 ， 每 个 域名 50 
个 、 大 小 总 计 4KB 的 Cookie 是 安全 的 ， 不 过 这 存储 不 了 太 多 Cookie 值 ， 会 影响 它们 的 实 
际 应 用 。 




















Cookie 对 应 唯一 的 域名 。 这 意味 着 在 foo.com 上 设置 的 Cookie 值 不 能 用 于 goo.com。 这 
样 很 好 ， 因 为 你 不 会 希望 其 他 网 站 影响 你 在 自己 的 网 站 上 使 用 Cookie。Cookie 也 可 以 对 
应 唯一 的 子 域名 。 例 如 ，app.foo.com 是 Foo 网 站 的 一 个 独立 的 子 域 名 。 你 可 以 创建 只 
app.foo.com 可 以 读 取 的 Cookie， 也 可 以 创建 www.foo.com 和 app.foo.com 都 可 以 读 取 的 
Cookie。 





























更 复杂 的 做 法 是 创建 只 对 特定 路 径 有 效 的 Cookie。 所 以 ， 你 可 能 希望 创建 只 有 foo.com/ 
app 可 见 的 Cookie。 





最 后 ， 你 可 以 创建 只 对 网 站 的 安全 (HTTPS) 版 本 有 效 的 Cookie。 显 然 ， 选 用 哪 种 方案 取 
决 于 应 用 程序 的 用 途 ， 以 及 你 认为 哪里 需要 Cookie 值 。 





除了 设置 Cookie 出 现 的 地 方 ， 还 可 以 指定 Cookie 的 有 效 时 间 。 对 此 ， 你 有 以 下 几 个 选项 ; 


。 只 在 当前 会 话 期 间 存在 的 Cookie (从 根本 上 说 是 直到 浏览 器 关闭 ) ; 
。 水 远 存 在 的 Cookie; 

。 存在 特定 时 长 的 Cookie; 

。 特定 时 间 点 之 后 失效 的 Cookie。 


2.2 ”使 用 Cookie 


Cookie 没有 API。 要 使 用 Cookie， 只 需要 在 代码 中 访问 document.cookie 对 象 。 例 如 ， 可 
以 像 下 面 这 样 创建 一 个 Cookie。 




















document .cookie = "name0fCookie=vaLue'" ; 





上 例 创 建 了 一 个 名 为 name0fCookie 的 Cookie， 并 将 它 的 值 定义 为 value。 你 可 以 使 用 
"name=value" 同时 定义 名 称 和 值 。 以 下 是 一 个 实例 。 





document .cookie = "name=Raymond"; 


在 上 面 的 例子 中 ， 我 简单 设置 了 一 个 名 为 name、 值 为 Raymond 的 Cookie。 值 必须 符合 URL 
编码 规则 ， 这 意味 着 如 果 想 动态 定义 Cookie， 那 么 就 需要 使 用 类 似 encodeURIComponent 的 
辅助 函数 ， 如 下 所 示 。 





name = "Raymond Camden"; 
document .cookie = "name=" + encodeURIComponent(name ) ; 
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目前 为 止 ， 一 切 顺利 。 但 这 里 就 是 事情 变 得 有 点 古怪 的 地 方 。 你 可 能 想 知道 如 何 设置 多 个 
Cookie。 这 能 够 通过 直接 对 document .cookie 进行 多 次 设置 实现 ， 如 下 所 示 。 





document .cookie = "name=Raymond"; 
document.cookie = "age=43"; 





这 段 示 例 代码 实际 上 创建 了 两 个 Cookie， 而 不 是 一 个 。 我 觉得 这 完全 不 符合 逻辑 ， 但 是 我 
们 必须 适应 这 种 定义 方式 。 





Cookie 就 是 这 样 创建 并 赋值 的 ， 但 是 ， 我 提 到 过 的 所 有 其 他 元 数据 ( 像 定 义 Cookie 在 哪 
里 可 见 以 及 它 存 在 多 长 时 间 ) 呢 ? 在 Cookie 值 后 面 使 用 一 个 分 号 可 以 追加 元 数据 。 下 面 是 
一 个 例子 。 























document .cookie = "name=Raymond; expires=Fri, 31 Dec 9999 23:59:59 GMT"; 


这 个 例子 指明 了 Cookie 何 时 过 期 。 我 们 可 以 进一步 扩展 ， 指 定 该 Cookie 只 对 一 个 子 域名 
有 效 。 


document .cookie = "name=Raymond; expires=Fri, 31 Dec 9999 23:59:59 GMT; 
domain=app.foo.com"; 





你 已 ee Cookie。 当 你 不 这 样 指定 元 数据 时 ，Cookie 默认 只 对 当前 域名 的 当 
前 路 径 有 效 (你 可 希望 这 样 )， 有 效 期 是 当前 会 话 。 











2.2.1 读 取 Cookie 
读 取 Cookie 多 少 简单 一 些 这 取决 于 你 对 字符 串 解 析 的 习惯 程度 。 没 有 API 可 以 用 来 
获取 “一 个 ”Cookie。 不 过 ， 你 只 需要 简单 地 读 取 document .cookie 就 可 以 了 。 这 样 ， 你 
就 可 以 获取 特定 网 站 的 所 有 Cookie。 以 下 是 从 CNN 获取 的 document .cookie 值 。 


























"_cb ls=1; 
_Chartbeat2=DLxk2YDHxyg1BXCry6.1426601000831.1439508384927.0000000000000001; 
Akamai_AnalyticsMetrics clientId=89E881222EQBD593DF2468758F328F689C36BAC1; 
octowebstatid=16ppgnhrsoSf2frjuvq5; ug=55cd27810eb00b0a3c6ac33c7d05339d; ugs=1; 
__CG=u%3A2449373858398994400%2Cs%3A72001958%2Ct%3A1439508379253%2Cc%3A1%2Ck%3 
Awww.cnn.com/19/19/54%2Cf%3A0%2Ci%3A0; __CT_Data=gpv=10; 
gads=ID=3d001e8bba3c7c6d:T=1426601001:S=ALNI_MYWNNYVv1SRtOtx7LQ2AzdSESOBygNA; 
__vrf=1439508379290061VnNeHVWPiLIjkcWMeUjRWpppwsPktE; 
grvinsights=a5a942f8e7c604d573496053d63f590c; optimizelyBuckets=%7B%7D; 
optimizelyEndUserId=oeu1426600996913r0.5135214943438768; 
optimizelySegments=%7B%22170962340%22%3A%22false%22%2C%22171657961%22%3A%22 
safari%22%2C%22172148679%22%3A%22none%22%2C%22172265329%22%3A%22direct%22%7D; 
RT=sl=1&ss=1439508375405&tt=9387&obo=0&bcn=%2F%2F36f11le49.mpstat.us%2F&sh=1439 
508384794%3D1%3A0%3A9387&dm=cnn.com&si=5be398d8-bb51-42ea-8128-6d4251e47ada; 
s_cc=true;s_fid=5324AC5DOF8323AB-3F26DEB602CBB276; s_ppv=13; s_sq=%5B 
%5BB%5D%5D;s_vi=[CS]v1|2A841A13051DOB97-400001280000490C[CE]; tosAgreed=true" 
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是 不 是 看 起 来 一 团 糟 ? 完全 正确 。 读 取 一 个 Cookie 就 意味 着 将 字符 串 解析 成 多 个 由 分 号 分 
隔 的 部 分 。 另 外 还 要 注意 ， 你 无 法 访问 任何 元 数据 。 通 过 document.cookie 值 无 法 获取 这 
类 信息 。 虽 然 字 符 串 解析 并 不 是 很 难 ， 但 实际 上 ， 你 不 需要 那样 做 。 在 本 章 的 末尾 ， 我 会 
介绍 一 个 优秀 而 小 巧 的 库 ， 它 让 你 可 以 更 轻松 地 使 用 Cookie。 





























2.2.2 ”删除 Cookie 
要 删除 Cookie， 只 需要 将 其 过 期 时 间 设置 成 过 去 的 时 间 ， 如 下 所 示 。 

















document .cookie = "name=Raymond; expires=Thu，01 Jan 1970 00:00:00 GMT"; 


从 技术 上 讲 ， 这 个 时 间 值 无 关 紧 要 ， 但 名 称 必 须 与 你 想 要 删除 的 Cookie 名 称 一 致 。 


2.3 演示 程序 

你 已 经 了 解 了 使 用 Cookie 的 基本 知识 ， 让 我 们 看 一 个 简单 的 演示 程序 。 我 之 前 说 过 ， 你 也 
许 不 希望 自己 构建 解析 Cookie 的 代码 。 相 反 ， 你 应 该 从 许多 已 有 的 库 中 选择 一 种 来 用 。 在 
演示 程序 中 ， 我 们 将 使 用 一 个 由 Mozilla 开发 者 网 络 (Mozilla Developer Network，MDN) 
提供 的 简单 (并 且 优 秀 ) 的 免费 库 。 你 可 以 通过 https://developer.mozilla.org/en-US/docs/ 
Web/API/Document/cookie 找到 这 些 代码 (及 更 多 有 关 Cookie 的 信息 )。 该 库 包含 如 下 方法 。 

















。 getItem: 获取 Cookie 

。 setItem: 设置 Cookie (包括 有 效 期 、 路 径 、 域 名 ， 等 等 ) 
。 removeItem: 删除 Cookie 

。 hasItem: 检查 Cookie 是 否 存在 
。 keys: 返回 所 有 Cookie 的 名 称 




















MDN 提供 的 代码 已 经 被 保存 在 文件 cookies.js 中 。 该 文件 会 和 本 书 的 其 他 代码 一 起 提供 。 
第 一 个 例子 (testl.html) 只 是 简单 地 使 用 Cookie 统计 你 访问 网 站 的 次 数 (请 见 示例 2-1)。 








顺便 说 一 下 ， 本 书 所 有 的 示例 都 假定 (并 需要 ) 你 是 在 本 地 Web 服务 器 上 运行 它们 ， 而 不 
只 是 在 浏览 器 中 打开 文件 。 如 果 你 没有 在 本 地 安装 Web 服务 器 ， 则 可 以 考虑 使 用 一 个 类 似 
httpster (https://simbco.github.io/httpster/) 的 简单 工具 ， 快 速 搭建 一 个 供 开 发 使 用 的 Web 
服务 器 。( 但 答应 我 ， 稍 后 安装 一 个 合适 的 Web 服务器。 你 是 Web 开发 人 员 ， 对 吧 ? ) 

















示例 2-1 testl.html 


<!DOCTYPE htmL> 

<html> 

<head> 
<meta charset="utf-8"> 
<title>Cookie Test One</title> 
<meta name="description" content=""> 





<meta name="viewport" content="width=device-width"> 
<script type="text/javascript" src = 
"http://ajax.googleapis.com/ajax/\libs/jquery/2.1.0/jquery.min.js"></script> 
<script type="text/javascript" src="cookies.js"></script> 

</head> 


<body> 
<div id="resultDiv"></div> 


<script> 
$(document).ready(function() { 





// 初 始 值 
var visited = 0; 
// 检 查 Cookie 是 否 存在 …… 
if(docCookies.hasItem("visited")) { 
// 获 取 Cookie 
visited = docCookies.getItem("visited"); 
} 
visited++; 
// 更 新 


docCookies.setItem("visited", visited); 


$("#resultDiv").text("You have visited this site "+ visited + 
" times."); 
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</script> 


</body> 
</html> 


在 代码 开始 的 部 分 ， 你 可 以 看 到 一 个 相当 典型 的 document.ready 块 ， 它 来 自 简单 易 用 的 
jQuery 库 。 首 先 ， 我 为 变量 visited 设置 了 一 个 初始 值 。 如 果 Cookie 解析 库 通 过 检测 发 现 
名 为 visited 的 Cookie 已 经 存在 ， 那 么 我 会 使 用 该 Cookie 的 值 更 新 这 个 变量 。 然 后 ， 将 
变量 的 值 加 1 再 存 回 到 Cookie 中 ， 由 浏览 器 显示 出 来 。 在 默认 情况 下 ,该 Cookie 只 在 当 
前 会 话 期 间 有 效 ， 因 此 ， 我 们 在 test2.html (示例 2-2) 中 对 此 进行 了 改进 。 









































示例 2-2 test2.html 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Cookie Test Two</title> 
<meta name="description" content=""> 
<meta name="viewport" content="width=device-width"> 
<script type="text/javascript" src = 
"http://ajax.googleapis.com/ajax/\libs/jquery/2.1.0/jquery.min.js"></script> 
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<script type="text/javascript" src="cookies.js"></script> 
</head> 
<body> 


<div id="resultDiv"></div> 


<script> 
$(document).ready(function() { 


// 初 始 值 
var visited = 0; 
// 检 查 Cookie 是 否 存在 …… 
if(docCookies.hasItem("visited2")) { 
// 获 取 Cookie 
visited = docCookies.getItem("visited2"); 
} 
visited++; 
// 更 新 


docCookies.setItem("visited2", visited, Infinity); 


$("#resultDiv").text("You have visited this site "+ Visited + 
" times."); 


}); 


</script> 


</body> 

</html> 
在 这 个 版 本 中 ， 我 们 作 了 两 处 修改 。 首 先 ，Cookie 的 名 称 被 改 为 visited2。 通 常 ， 我 会 使 
用 以 前 用 过 的 名 称 ， 但 我 们 希望 在 测试 的 过 程 中 区 分 这 两 个 Cookie。 第 二 个 变化 是 修改 了 
setIten 方法 的 调用 方式 。 我 们 使 用 值 Infinity 作为 有 效 期 。 这 样 ， 创 建 的 Cookie 会 一 直 
存在 。 现 在 ， 页 面 会 准确 地 反映 特定 用 户 访问 网 站 的 次 数 ， 而 不 管用 户 是 否 是 在 同一 个 浏 
览 器 会 话 期 间 进行 访问 。 
到 目前 为 止 ， 演示 程序 还 算 非 常 简 单 ， 所 以 ， 让 我 们 提高 一 下 难度 。 我 们 可 以 使 用 Cookie 
记 住 用 户 最 后 一 次 访问 网 站 的 时 间 。 根 据 这 个 时 间 ， 我 们 可 以 做 以 下 事情 : 





























。 问候 以 前 从 来 没有 访问 过 该 网 站 的 新 用 户 ，; 
。 为 隔 了 一 段 时 间 再 来 访问 网 站 的 用 户 提供 重要 的 信息 ， 比 如 介绍 很 酷 的 新 功能 
。 简单 地 欢迎 经 常 访 问 网 站 的 用 户 。 








让 我 们 看 一 下 示例 2-3 的 代码 ， 随 后 我 会 向 你 解释 它 的 执行 过 程 。 


示例 2-3 test3.html 


<!DOCTYPE htmL> 
<htmL> 





<head> 
<meta charset="utf-8"> 
<title>Cookie Test Three</title> 
<meta name="description" content=""> 
<meta name="viewport" content="width=device-width"> 
<script type="text/javascript" src = 
"http://ajax.googleapis.com/ajax/\libs/jquery/2.1.0/jquery.min.js"></script> 
<script type="text/javascript" src="cookies.js"></script> 
</head> 
<body> 


<div id="resultDiv"></div> 


<script> 
$(document).ready(function() { 


var $resultDiv = $("#resultDiv"); 


// 这 是 一 名 新 用 户 吗 ? 


var newUser = true; 
// 从 最 后 一 次 访问 到 现在 有 多 少 天 


var daysSinceLastVisit; 





// 检 查 Cookie 是 否 存 在 …… 
if(docCookies.hasItem("lastVisit")) { 
newUser = false; 





// 计 算出 最 后 一 次 访问 距离 现在 多 久 了 

var lastVisit = docCookies.getItem("lastVisit"); 

var now = new Date(); 

var lastVisitDate = new Date(lastVisit); 

// 参 见 http://stackoverflow.com/a/3224854/52160 

var timeDiff = Math.abs(now.getTime() - lastVisitDate.getTime()); 
var daysSinceLastVisit = Math.ceil(timeDiff / (1000 * 3600 * 24)); 


} 
// 将 LastVisit 设 为 当前 时 间 


docCookies.setItem("lastVisit", new Date(), Infinity); 


if(newUser) { 
$resultDiv.text("Welcome to the site!"); 
} else if(daysSinceLastVisit > 20) { 
$resultDiv.text("Welcome back to the site!"); 
} else { 
$resultDiv.text("Welcome good user!"); 


} 
]); 
</script> 
</body> 
</html> 
我 们 首先 设置 了 两 个 变量 一 一 newUser 和 daysSinceLastVisit。 前 者 是 布尔 类 型 ， 我 们 可 以 
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通过 它 确 定 用 户 是 否 是 新 用 户 ， 而 后 者 将 报告 用 户 最 后 一 次 访问 距离 现在 的 天 数 。 

如 果 名 为 astVisit 的 Cookie 已 经 存在 ， 那 么 我 们 就 获取 它 的 值 ， 然 后 以 这 个 值 为 基础 创 
建 一 个 Date 类 型 的 变量 。 然 后 ， 我 们 就 可 以 使 用 一 些 简单 的 数学 运算 ， 计 算出 用 户 最 后 
次 访问 到 现在 有 多 少 天 了 。 

















接 下 来 ， 我 们 将 lastVisit 的 Cookie 值 设 为 当前 时 间 。 


这 就 是 核心 逻辑 。 然 后 ， 我 们 只 需要 根据 上 述 三 种 状态 中 的 一 种 发 出 一 条 消息 。 在 这 个 演 
示 程 序 中 ， 超 过 20 天 就 认为 用 户 最 后 一 次 访问 距离 现在 太 久 了 。 显 然 ， 这 个 值 是 任意 的 。 


2.4 使 用 开发 者 工具 查看 Cookie 


如 今 的 训 览 器 都 提供 了 非常 优秀 的 开发 者 工具 ， 让 你 可 以 更 轻松 地 查看 Cookie 的 使 用 情 
况 。 在 Firefox 中 ， 你 需要 启用 存储 选项 卡 〈Storage， 默 认 情 况 下 可 能 不 显示 ) 才能 看 到 
Cookie。 一 旦 启用 ， 你 就 可 以 查看 当前 的 Cookie 了 (如 图 2-1 所 示 )。Firefox 不 允许 修改 
Cookie， 只 能 查看 。 























Welcome to the site! 











民 EE Inspe... I> Con... |@ Debu... | 区 Style E... © Performa... 区 Net... ES 日 2 四 | 苏 加 加 x 


- 时 Cookies 






Name | Path Domain (\Q Fiter values 











| 1 加 0 

》 时 Indexed DB Wed 7 visited: "7" 

上 是 Local Storage visited2 /c2/ 127.0.0.1 1 creationTime: "8/13/2015, 9:00:57 PM 
expires: "Session" 


host: "127.0.0.1" 
isDomain: false 








》 办 session Storage 


isHttpOnly: false 

isSecure: false 

lastAccessed: "8/13/2015, 9:03:13 PM" 
path: "/c2/" 











x |» 区 











2-1: Firefox 开发 者 工具 中 显示 的 Cookie 





Chrome 在 资源 选项 卡 (Resources) 中 显示 站 点 当前 的 Cookie (如 图 2-2 所 示 )。 你 可 以 在 
这 里 删除 Cookie， 但 不 能 编辑 。 








You have visited this site 4 times. 


要 [月 
irst-Pa 





Q 加 Elements Network Sources Timeline Profiles |Resources| Audits Console PouchDB Wayback Viewer 
PFrames Name 和 | Value 
由 web saL lastVisit ThuX20AUg%2013%202015%2021%.. | localhost 
* 国 IndexedDB Wl 4 | localhost 
visite d2 
* 国 Local Storag， 
* 国 Session Storai 


| 
| 
了 国 cookies | 
| 
蚁 noojglkidnpfibincgijbaie... | 

国 Application Cache | | 

时 cache Storage | 

| 


GO 














图 2-2: Chrome 中 显示 的 Cookie 


2.5 浏览 器 支持 和 使 用 建议 


CanIUse.com 是 核实 浏览 器 特性 支持 情况 的 最 佳 资 源 ， 但 它 没 有 提供 关于 Cookie 的 报告 ， 


这 是 因为 Cookie 很 久之 前 就 已 经 获得 了 100% 的 支持 。 不 过 ， 仅 仅 浏 
不 能 保证 它 可 以 正常 使 用 。 许 多 人 都 因为 对 Cookie 存 有 戒心 而 屏蔽 了 它们 。 











支持 这 项 特性 并 


至 于 使 用 建议 ， 就 像 我 在 本 章 开头 所 说 的 那样 ， 我 的 建议 是 不 使 用 Cookie， 但 如 果 你 一 定 


要 用 ， 那 么 也 以 简单 为 好 。 可 以 用 它们 存储 用 户 偏 





实际 的 例子 。 我 使 用 WordPress 写 博 客 。 当 我 上 传 区 


好 和 基本 信息 (姓名 、 年 龄 等 )。 
片 时 ，WordPress 总 会 

















到 博文 时 ， 询 问 我 是 否 希 望 包含 图 片 链 接 。 我 几乎 总 是 更 改 这 个 特定 的 表单 志 











举 个 


企 将 图 片 添加 
告诉 它 我 


不 需要 链接 。 这 时 ， 就 可 以 使 用 Cookie 记 住 我 的 选择 ， 那 样 我 就 不 必 在 写 博客 的 过 程 中 不 
断 地 更 改 这 个 表单 域 。 这 是 一 个 很 简单 的 例子 ， 却 是 我 几乎 每 天 都 会 碰 到 的 事 。 最 后 ， 如 
果 你 认为 有 些 东 西 是 服务 器 也 应 该 知道 的 ， 那 么 就 可 以 使 用 Cookie 确保 服务 器 看 到 的 是 同 


样 的 值 。 
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使 用 Web 存 储 





3.1 ”Web 存储/ 本 地 存储 


我 们 大 多 数 人 所 说 的 本 地 存储 技术 ， 其 正式 名 称 为 Web 存储 。 在 本 书 将 要 讨论 的 所 有 客户 
端 技术 中 ，Web 存储 API 可 能 是 学 习 周 期 最 短 的 ， 也 是 最 容易 学 会 的 。 该 API 主要 通过 键 
设置 和 检索 简单 的 值 。 例 如 ， 存 储 键 name 的 值 Ray， 或 者 存储 键 age 的 值 43。 它 不 支持 复 
杂 数 据 (比如 数组 或 对 象 )， 但 你 可 以 把 这 样 的 值 预先 编码 成 JSON， 然 后 再 存储 。( 显 然 ， 
在 检索 时 需要 解码 。) 


Web 存储 有 两 个 版 本 : 本 地 存储 (Local Storage) 和 会 话 存储 (Session Storage)。 两 者 使 
用 完全 相同 的 API， 但 本 地 存储 会 持久 存在 (或 者 直到 用 户 清除 )， 而 会 话 存储 只 要 浏览 器 
关闭 就 会 消失 。 因 为 大 多 数 人 都 使 用 持久 化 版 本 ， 所 以 大 多 数 开发 人 员 使 用 (和 谈论 ) 的 
都 是 本 地 存储 。Web 存储 API 官方 规范 的 网 址 为 http://www.w3.org/TR/webstorage。 








和 Cookie (及 本 书 涉及 的 其 他 技术 ) 类 似 ，Web 存储 是 与 域名 一 一 对 应 的 。 和 Cookie 不 
同 的 是 ， 无 法 让 app.foo.com 使 用 www.foo.com 存储 的 数据 。( 可 以 借助 iframe 变通 实现 ， 
但 比较 复杂 ， 这 里 暂且 不 讲 。) 从 根本 上 说 ， 这 意味 着 foo.com 和 goo.com 都 可 以 安全 地 使 
用 名 为 nane 的 Web 存储 键 一 一 它们 不 会 冲突 。 





Web 存储 的 限制 没有 一 定之 规 ， 但 一 般 为 5~10MB。 一般 来 说 ， 这 应 该 够 用 了 ， 除 非 你 要 
存储 大 数据 包 ， 而 我 (通常 ， 但 并 不 总 是 ) 不 建议 这 样 做 。 如 果 超 出 了 限制 ， 则 Chrome、 
Firefox 和 Safari 浏览 器 都 会 报告 一 个 你 可 以 在 代码 中 进行 处 理 的 错误 。 但 遗憾 的 是 ， 
Internet Explorer 11 和 Edge (在 本 书写 作 时 ) 什么 也 不 会 做 。 














3.2 ”使 用 Web 存 储 


Web 存储 API 有 如 下 4 个 简单 的 方法 (本章 所 有 的 演示 程序 都 会 使 用 本 地 存储 ， 但 请 记 
住 ， 会 话 存储 版 本 的 用 法 完全 相同 ) 。 





。 localStorage.setItem: 设置 特定 键 的 值 

。 localStorage.getItem: 检索 特定 键 的 值 

。 localStorage.removeItem: 删除 键 及 与 其 关联 的 值 

。 localStorage.clear: 删除 所 有 的 键 / 值 对 (但 只 限于 发 出 请 求 的 特定 域名 ) 



































虽然 Web 存储 提供 了 API， 但 仍然 可 以 像 对 待 简单 的 JavaScript 对 象 那样 处 理 数 据 。 例 如 ， 
下 面 的 语句 : 


localStorage.setItem["something"] = 1 
会 写 人 Web 存储 ， 而 语句 : 
console.log(localStorage["something"]); 
会 读 取 存储 。 虽 然 这 可 以 正常 运行 ， 但 为 了 一 致 起见， 我 一 般 建议 使 用 API 方 法 。 


有 一 件 事 你 必须 非常 小 心 ， 那 就 是 在 Web 存储 中 存储 什么 数据 。Web 存储 仅 支 持 字符 串 
数据 。 这 有 时 会 引起 混淆 。 考 虑 下 面 这 段 代 码 。 




















var names = ["Ray", "Jeanne"]; 
localStorage.setItem("names", Names); 


这 段 代 码 可 以 正常 运行 。 不 过 ， 它 会 存储 数组 的 字符 串 版 本 ， 而 不 是 数组 本 身 。 也 就 是 
说 ， 如 果 你 稍 后 调用 localstorage.getItem("names")， 那 么 将 得 到 字符 串 "Ray,Jeanne"， 
而 不 是 期 望 的 数组 。 




















幸运 的 是 ， 有 一 种 相当 简单 的 变通 方案 , JSON 编码 。 将 复杂 的 数据 转换 成 JSON， 然 后 在 
获取 值 的 时 候 通 过 解码 进行 还 原 ， 就 可 以 轻松 地 将 复杂 的 数据 存 和 人 Web 存储 了 。 下 面 是 上 
述 代 码 片 段 的 修正 版 本 ， 它 使 用 了 现代 浏览 器 提供 的 JSON 对 象 。( 对 于 比较 老 的 浏览 器 ， 
有 许多 库 可 以 让 你 添加 这 种 支持 。) 





var names = ["Ray", "Jeanne"]; 
localStorage.setItem("names", JSON.stringify(names)); 





将 值 重新 读 到 数组 里 也 非常 简单 ， 























var storedNames = JSON.parse(localStorarge.getItem("names")); 


为 了 确保 这 种 方法 有 效 ， 你 需要 记 住 什么 键 存储 了 什么 类 型 的 值 。 因 此 ， 务 必 随 时 记录 。 











你 可 以 使 用 这 样 一 种 命名 系统 ， 就 是 将 所 有 值 为 SON 编码 的 键 都 加 上 前 级 js 或 json。 
如 你 所 见 ， 该 API 非常 简单 。 下 面 让 我 们 看 儿 个 演示 程序 。 


c= 
3.3 ” 肖 示 程序 
第 一 个 演示 程序 非常 简单 ， 而 且 有 点 老 套 。 我 们 将 使 用 Web 存储 记录 你 访问 页 面 的 次 数 
(示例 3-1)。 上 一 章 讲 过 ， 要 使 用 一 个 合适 的 Web 服务 器 来 测试 ， 这 里 再 次 提醒 。 不 要 仅 
仅 通过 双击 打开 文件 ， 而 是 要 在 本 地 Web 服务 器 上 运行 它 。 























示例 3-1 testl.html 


<!DOCTYPE htmL> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>WebStorage Test One</title> 
<meta name="description" content=""> 
<meta name="viewport" content="width=device-width"> 
<script type="text/javascript" src = 
"http://ajax.googleapis.com/ajax/\libs/jquery/2.1.0/jquery.min.js"></script> 
</head> 
<body> 


<div id="resultDiv"></div> 


<script> 
$(document).ready(function() { 


if(window.localStorage) { 
var numHits = localStorage.getIitem("numHits"); 
if(!numHits) numHits=0; 
else numHits = parseInt(numHits, 10); 
NumHits++; 
localStorage.setItem("numHits" ,numHits); 
$("#resultDiv").text("You have visited this site " + 

NumHits +" times."); 
} 
]); 


</script> 


</body> 
</html> 





示例 代码 包含 一 个 简单 的 div 块 ， 我 们 将 用 它 显示 你 访问 网 站 的 次 数 。JavaScript 代码 首先 
检查 window.localstorage 是 否 存 在 。 虽 然 Web 存储 已 经 获得 了 相当 好 的 支持 (在 本 章 末 尾 
你 会 看 到 )， 但 检查 并 确保 浏览 器 支持 这 一 特性 只 需要 很 少 的 代码 。 接 下 来 ， 获 取 numHits 
键 的 值 。 如 果 什 么 也 没 取 到 ， 那 就 默认 其 值 为 0。 否则 ， 使 用 parseInt 将 字符 串 值 转换 成 
一 个 正确 的 数值 。 记 住 ，Web 存储 将 一 切 数据 作为 字符 串 存 储 ， 甚 至 数值 也 是 如 此 。 

































































使 用 Web 存 储 | 15 











接 下 来 ， 我 们 增加 计数 器 的 值 ， 并 重新 存 入 Web 存储 ， 然 后 将 结果 显示 在 屏幕 上 (如 图 
3-1 所 示 )。 我 们 原本 可 以 做 得 更 好 ， 即 显示 “1 time” 而 不 是 “1 times”， 但 就 我 们 的 目的 
而 言 ， 那 过 于 复杂 了 。 




















Oe@ )/ 一 Webstorage Test One x \ 苇 | Raymond 
€ SC A [localhost:3333/b... 7? 过 结 国 三 


:3 Apps 国 | News 国 |Blogs 国 CF 心 » [| Other Bookmarks 





You have visited this site $ times. 











3-1: 演示 程序 多 次 运行 之 后 


如 前 所 述 ， 因 为 Web 存储 API 的 会 话 存储 版 本 并 没有 什么 不 同 之 处 ， 所 以 我 们 没有 涉及 ， 
只 是 将 相关 的 代码 包含 在 一 个 名 为 testl_session.html 的 文件 中 。 那 是 示例 3-1 的 一 个 修正 
版 本 ， 简 单 地 说 明了 如 何 使 用 sessionStorage 对 象 ， 而 不 是 LocaLStorage。 





现在 ， 让 我 们 更 进一步 。 接 下 来 的 演示 程序 将 展示 一 些 真 正 实用 的 东西 。 你 是 否 曾经 在 填 
写 表单 时 ， 意 外 关 掉 了 浏览 器 页 签 ? 或 者 表单 是 在 一 个 需要 登录 信息 的 网 站 上 ， 而 在 你 填 
完 表单 之 前 登录 过 期 了 ?在 示例 3-2 中 ， 我 们 将 使 用 Web 存储 保存 表单 数据 的 一 个 副本 ， 
这 样 数据 就 不 会 丢失 了 。 当 表单 真正 填写 完成 后 ， 我 们 还 需要 删除 表单 数据 。 

















示例 3-2 test2.html 


<!DOCTYPE htmL> 
<htmL> 
<head> 
<meta charset="utf-8"> 
<title>WebStorage Test Two</title> 
<meta name="description" content=""> 
<meta name="viewport" content="width=device-width"> 
<script type="text/javascript" src = 
"http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 


</head> 
<body> 


<form id="myForm"> 
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<p> 


Your Name : 
<input type="text" id="name" name="name"> 


</p> 


<p> 


Your Age: 
<input type="number" id="age”name=" age"> 


</p> 


<p> 


Your Email: 
<input type="email" id="email" name="email"> 


</p> 


<p> 


<input type="submit"> 


</p> 
</form> 


<script> 


$(document).ready(function() { 


if(window.localStorage) { 


// 如 果 有 数据 , 则 获取 并 预 设 


if(LlocalStorage.getIitem("personForm")) { 


} 


var person = 
JSON.parse(LocaLStorage.getItem("personForm'") ) ; 
S("#name" ) .vaL(person.name); 
$("#age").val(person.age); 
$s("#email").val(person.email); 
console.log("restored from storage"); 








// 监 听 所 有 <input> 字 段 及 其 输入 事件 
$s("input").on("input", function(e) { 


}); 


var name = $("#name").val(); 

var age = $("#age").val(); 

var email = $("#email").val(); 

var person = {"name":name, "age":age, "email":email}; 

localStorage.setItem("personForm", 
JSON.stringify(person)); 

console.log("stored the form..."); 


// 表 单 处 理 器 应 该 清除 存储 
$s("#myForm").on("submit",function(e) { 


}); 








localStorage.removeltem("personForm"); 
return true; 
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</script> 

</body> 

</html> 
文件 上 半 部 分 正 是 我 们 要 存留 的 表单 。 它 有 三 个 输入 字段 和 一 个 提交 按钮 。( 注 意 : <form> 
标签 并 没有 action 值 ， 这 是 因为 我 们 并 不 是 真 要 构建 一 个 表单 处 理 器 。) 
在 JavaScript 部 分 ， 我 们 要 再 一 次 确保 浏览 器 支持 Web 存储 ， 然 后 才 开始 处 理 业务 。 
首先 要 做 的 是 查看 Web 存储 中 是 否 存在 表单 数据 。 我 们 获取 personForm 键 的 值 ， 如 果 该 
值 存在 ， 则 它 会 是 一 个 JSON 编码 的 对 象 。 取 得 该 值 并 解码 之 后 ， 我 们 就 可 以 使 用 已 有 的 
数据 逐个 更 新 表单 字段 。 因 为 它们 都 是 普通 的 文本 字段 ， 所 以 这 个 过 程 并 不 难 。 但 显然 ， 
只 要 稍微 多 做 一 些 工 作 ， 你 就 可 以 支持 select、checkbox 和 radio 字段 。 









































接 下 来 ， 我 们 在 表单 的 输入 字段 上 添加 一 个 事件 监听 器 。 输 入 事件 每 次 被 触发 都 意味 着 输 
入 字段 的 内 容 发 后 了 变化 。 我 们 获取 这 些 字段 的 值 ， 把 它们 存储 在 一 个 简单 的 对 象 中 ， 然 
后 将 JSON 编码 版 本 存 入 Web 存储 。 




















最 后 ， 在 用 户 提交 表单 时 〈 如 图 3-2 所 示 )， 我 们 就 不 再 需要 保存 表单 数据 的 副本 了 。( 虽 
然 从 技术 上 讲 确 实 如 此 ， 但 如 果 这 是 一 个 人 们 经 常 使 用 的 表单 ， 那 么 你 可 能 会 希望 保存 某 


些 字段 。) 

















© 转 /~ WebStorage Test Two X \ Raymond | 
La 2 


NS 





€ SC | localhost:3333/book/code/c3/test... Ye 管 本 轩 三 
::: Apps 大 News 科 Blogs 位 CF 名 四 » [NM other Bookmarks 





Your Name: Raymond Camden 
Your Age: 42 
Your Email: 


Submit 











3-2: 自动 加 载 部 分 样 例 数据 的 表单 
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3.4 监听 存储 变化 


我 们 将 要 探讨 的 最 后 一 项 特性 是 存储 事 们 


证 


。 该 特性 有 一 点 奇怪 ， 而 且 可 能 不 是 你 需 





的 问题 ， 但 绝对 值得 讨论 。 顾 名 思 义 ， 存 














示例 3-3 test3.html 


<!DOCTYPE htmL> 
<html> 
<head> 
<meta charset="utf-8"> 


要 担心 


储 事件 是 存储 (包括 本 地 存储 和 会 话 存 储 ) 被 修 
改 时 抛 出 的 事件 。 让 我 们 看 一 个 简单 的 例子 (示例 3-3)。 





<title>WebStorage Event Test</title> 


<meta name="description" content=""> 
<meta name="viewport" content="width=device-width"> 
<script type="text/javascript" src = 


"http://ajax.googleapis.com/ajax/\libs/jquery/2.1.0/jquery.min.js"></script> 


</head> 
<body> 


<form id="myForm"> 


<p> 
Test Value: 


<input type="text" id="test"> 


</p> 
</form> 


<script> 
$s(document).ready(function() { 


if(window.localStorage) { 


if(LocaLStorage.getItem("testVaLue" )) { 
S("#test" ) .vaL(LocaLStorage.getItem("testVaLue" ) ) ; 


} 


// 监 听 所 有 <input> 字 有 段 及 寺 





莽 输 入 习 





件 


$s("input").on("input", function(e) { 
var test = $("#test").val(); 
localStorage.setItem("testValue", test); 
console.log("stored the test value."); 


}); 


$s(window).on("storage", function(e) { 
console.log("storage event fired"); 


console.dir(e); 


}); 
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5 


</script> 


</body> 

</html> 
在 页 面 上 方 ， 你 会 看 到 一 个 简单 的 表单 ， 它 有 一 个 id 为 name 的 文本 字段 。 可 以 看 到 ， 
JavaScript 代码 和 上 一 个 演示 程序 有 点 类 似 。 页 面 加 载 时 ， 我 们 首先 会 查找 先前 存在 的 值 ， 
并 用 它 设 置 该 字段 。 然 后 ， 一 个 普通 的 输入 修改 处 理 器 会 监听 字段 的 变化 ， 并 存储 它们 。 
注意 ， 该 演示 程序 使 用 consote.1og 方法 记录 保存 日 志 。 
接 下 来 ， 我 们 有 一 个 新 的 事件 监听 器 。 因 为 存储 事件 是 在 window 对 象 上 触发 的 ， 所 以 我 们 


就 监听 该 对 象 。 稍 后 ， 我 们 将 进一步 讨论 事件 内 容 。 不 过 现在 ， 让 我 们 继续 ， 用 浏览 器 打 
开 文件 并 做 一 些 测试 。 简 单 输入 一 些 内 容 ， 并 修改 几 次 。 你 会 看 到 类 似 图 3-3 所 示 的 内 容 。 





























Test Value: cookies 





民 D Elements Network Sources Timeline Profiles Resources Audits | Console | PouchDB » 


© 可 <top frame> Y DPreserve log 


@ stored the test value. 
> 











3-3: 存储 事件 在 哪里 被 触发 ? 


注意 到 什么 异常 了 吗 ? 控制 台 上 有 多 条 关于 字段 值 存储 的 日 志 信息 ， 但 没有 任何 关于 存储 
事件 本 身 的 信息 ! 这 里 到 底 发 生 了 什么 ? 


好 吧 ， 事实 是 ， 存 储 事件 只 有 在 浏览 器 的 另 一 个 实例 修改 存储 时 ， 才 会 被 触发 。 怎 么 才 会 
出 现 那 种 情况 呢 ? 只 要 另外 打开 一 个 页 签 ， 输 入 相同 的 URL。 在 新 打开 的 页 签 中 修改 字段 
值 ， 然 后 返回 原来 的 页 签 ， 你 就 会 看 到 关于 事件 本 身 的 消息 了 。 这 里 的 情况 是 ， 存 储 事件 
让 你 知道 其 也 代码 修改 了 存储 。 


请 注意 ， 在 图 3-4 中 ， 事 件 包含 两 个 有 趣 的 值 ，oldValue 和 newValue。 你 可 能 已 经 猪 到 ， 
事件 正在 报告 原始 值 以 及 修改 后 的 值 。 


















































® 时 -< WebStorage Event Test x 全 WebStorage Event Test AN Raymond 














考博 
© Cm | [localhost:3333/c3/test3.html 国 交 地 要 加 多 三 
5 Apps 国 News 国 Blogs 全 CF 名 四国 ToFolowUp 蜀 work | | Inspect » | other Bookmarks 





Test Value: cookies 





展 口 Elements Network Sources Timeline Profiles Resources Audits |'Console | PouchDB » : Xx 


© 可 <top frame> Y Preserve log 


handtLe0bj: Object 
Pb isDefaultPrevented: function $() 
jQuery21003143480534199625: true 
metaKey: undefined 
YoriginaLEvent: StorageEvent 
bubbles: false 
cancelBubble: false 
cancelable: false 
pcurrentTarget: Window 
defaultPrevented: false 
eventPhase: 2 


key: "testValue" 
newValue: "cookies and beer" < 
oldValue: "cookies and bee" 
Ppath: Array[1] 
returnValue: true 


PsrcElement: Window 
PstorageArea: Storage 


图 3-4: 存储 事件 被 触发 ! 


现在 的 问题 是 ， 你 要 做 什么 ?实际 上 ， 如 何 处 理 变化 取决 于 你 的 应 用 程序 。 你 可 能 希望 提 
示 用 户 ， 询 问 他 们 是 想 要 接受 修改 ， 还 是 保持 当前 的 版 本 。 显 然 ， 这 已 经 太 晚 了 ， 因 为 存 
储 系统 已 经 变 了 。 但 是 ， 你 可 以 获取 表单 的 值 并 更 新 存储 。 当 然 ， 其 他 页 签 接着 就 会 看 到 
同样 的 警告 信息 。 因 此 ， 提 示 用 户 或 许 是 一 个 坏 主意 。 更 简单 的 做 法 可 能 是 仅 更 新 表单 字 
段 ， 让 它 包 含 最 新 的 值 。 示 例 3-4 说 明了 这 种 方法 。( 由 于 我 们 只 修改 了 存储 事件 ， 因 此 程 
序 清单 只 包含 这 部 分 代码 。) 















































示例 3-4 testd.html (片段 ) 


$(window).on("storage", function(e) { 
console.log("storage event fired"); 
$("#test").val(e.originalEvent.newValue); 


})s 


可 以 看 到 ， 我 们 只 是 使 用 新 值 更 新 了 表单 字段 。 我 们 原本 也 可 以 使 用 localstorage.getItenm 
("testValue") 方法 ,但 由 于 事件 已 经 包含 了 这 个 值 ， 因 此 直接 使 用 它 也 是 合理 的 。 


3.5 ”使 用 开发 者 工具 查看 Web 存 储 


对 于 Web 存储 的 使 用 ，Firefox 和 Chrome 都 在 各 自 的 浏览 器 开发 者 工具 中 提供 了 很 好 的 支 
持 。 从 图 3-5 中 ， 你 可 以 看 到 Firefox 如 何 显示 演示 程序 的 本 地 存储 数据 。 
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= 办 cookies 
全 127.0.0.1 
上 时 ndexed DB 


Key Value 





numHits 1 

personForm fname":"Raymond Camden","age":"42","email":""} 
-了 

二 加 Local Storage 


http://127.0.0.1:3333 


》 时 session Storage 

















» 





图 3-5: Firefox 开发 者 工具 的 Web 存储 视图 





如 果 你 觉得 这 不 够 直观 ， 则 可 以 点 击 一 个 值 ， 查 看 其 详细 视图 。Firefox 能 够 识别 H 
personForn 中 的 JSON 字符 串 ， 并 且 会 以 更 友好 的 方式 显示 出 来 〈 如 图 3-6 所 示 )。 











LE 












































民 | 人 DInspector | 》 Console | @@ Debugger | 区 sye Editor | © Performance | 三 Network 固 - 加 回回 | 交口 口 x 
”时 cookles Key Value (Q Finer values 3 
图 1270.01 i | Data 
， 时 mdexed DB eT ”PersonF orm: “(name’:"Raymond Camden…age…42…emai) 
~ 轧 Lecal storaee 2 
httpy/127.0.0.1:3333 


} 时 session Storage 


























图 3-6: Web 存储 值 的 详细 视图 











I 


在 Firefox 中 ，Web 存储 的 值 无 法 编辑 或 删除 。 不 过 ， 不 要 忘 了 ， 你 可 以 通过 控制 台 选 项 
卡 直接 操作 那些 值 。 











在 Chrome 中 ， 你 可 以 在 资源 选项 卡 中 查看 Web 存储 的 值 (如 图 3-7 所 示 )。 














Q Elements Network Sources Timeline Profiles |Resources| Audits Console » > 党 上 四 ，x 
POFrames Key Value 

时 web SQL numHits 5 
家 由 [HacedDe personForm fname": Raymond Camden","age":"42","email":"} 


v 国 Local Storage 
EEEE 








p> 国 session Storage 

* 国 cookies 
国 Application Cache 
时 Cache Storage 








(e200 4 











图 3-7: Chrome 开发 者 工具 的 Web 存储 视图 








和 Firefox 不 同 ， 你 可 以 双击 一 个 值 并 手动 进行 编辑 。 你 还 可 以 使 用 界面 底部 的 X 图 标 删 
除 某 条 记录 。 


3.6 浏览 器 支持 和 使 用 建议 


Web 存储 的 浏览 器 支持 情况 怎么 样 呢 ?” 图 3-8 是 CanIUse.com 给 出 的 答案 。 





Web Storage - name/Value pairs -rec Global 92.76% + 0.03% = 92.79% 


Method of storing data locally like cookies, but for larger amounts 
of data (sessionStorage and localStorage, used to fall under 
HTMLS). 


[eV Usage relatve Showall 


加 民 
IE/ Edge Firefox Chrome Safari Opera ios safari Opera Mini Android Browser Sree es 














图 3-8: CanlUse.com 


浏览 器 提供 了 非常 好 的 支持 。 就 像 你 在 演示 程序 中 看 到 的 那样 ， 检 查 浏 览 器 是 否 支 持 该 特 
性 并 使 用 它 增 强 页 面 功能 相当 简单 。 在 这 两 个 演示 程序 中 ， 即 使 浏览 器 不 支持 Web 存储 ， 
也 不 会 造成 什么 破坏 。 一 般 来 说 ， 这 是 我 们 在 构建 Web 页 面 时 应 该 采用 的 方式 ! 























至 于 使 用 建议 ， 我 认为 它 适合 存储 一 些 简单 的 信息 ， 用 户 偏好 就 是 一 个 很 好 的 例子 ， 还 有 
一 些 基本 信息 ， 比 如 用 户 的 姓名 、 年 龄 等 ,或许 还 可 以 存储 一 个 网 站 “最 受 欢迎 ”内 容 的 
列表 。 当 然 ， 这 些 信息 也 可 以 被 存储 在 服务 器 端 ， 但 是 ， 由 于 它们 是 特定 于 用 户 的 ， 对 于 
站 点 本 身 而 言 并 不 重要 ， 因 此 把 它们 存储 在 客户 端 可 能 更 合适 。 
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使 用 IndexedDB 





4.1 欢迎 来 到 深度 数据 时 代 

到 目前 为 止 ， 我 们 所 使 用 的 客户 端 数据 存储 系统 本 身 都 比较 简单 小 巧 。 现 在 ， 是 时 候 更 深 
入 一 些 ， 使 用 一 个 大 型 存储 系统 了 。IndexedDB 是 一 个 功能 强大 且 高 度 灵活 的 存储 系统 。 
你 可 以 使 用 它 在 用 户 浏览 器 中 存储 你 希望 存储 的 任何 数据 。 不 过 ， 出 色 的 功能 和 灵 话 性 至 
使 其 API 不 像 Web 存储 那么 友好 。 你 还 会 发 现 ， 移 动 端 浏览 器 对 IndexedDB 的 支持 还 不 
是 很 好 ， 即 使 支持 ， 其 实现 方式 也 很 糟糕 (iOS 8 对 IndexedDB 的 支持 尤其 差 ， 你 最 好 当 
它 不 支持 )。 不 过 ，IndexedDB 将 来 可 能 会 成 为 在 客户 端 存储 大 量 数据 的 标准 方法 。 要 了 解 
更 多 信息 ， 可 以 查看 IndexedDB 规范 ， 网 址 为 http://www.w3.org/TR/IndexedDB/。 这 会 是 
一 次 令 人 兴奋 的 阅读 体验 。( 真 的 ! ) 


和 本 书 之 前 所 介绍 的 其 他 客户 端 存储 系统 一 样 ，IndexedDB 是 和 域名 一 一 对 应 的 。 通 常 ， 
浏览 器 都 不 会 明确 定义 存储 限制 ， 即 使 定义 了 ， 往 往 也 非常 大 。 可 以 说 ， 基 本 上 没有 限 
制 。 但 是 ， 当 存储 空间 低 于 某 个 标准 时 ， 浏 览 器 就 会 开始 清理 其 他 IndexedDB 实例 。 和 大 
多 数 “持久 化 ”系统 一 样 ， 从 根本 上 说 ， 存 储 在 浏览 器 中 的 任何 数据 都 不 是 永远 存在 的 ， 
但 客户 端 数 据 存储 所 带 来 的 好 处 ， 即 使 是 半 持 久 化 ， 也 值得 我 们 这 样 做 。 
































4.2 IndexedDB 关 键 术 语 
在 开始 讲解 代码 之 前 ， 让 我 们 先 看 几 个 重要 的 IndexedDB 术语 。 
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数据 库 





IndexedDB 的 最 上 层 是 数据 库 的 概念 。 如 果 你 曾经 在 服务 器 端 Web 应 用 程序 中 使 用 过 
数据 库 ， 那 么 应 该 已 经 熟悉 这 个 概念 了 。 从 本 质 上 说 ， 数 据 库 就 是 存放 数据 的 地 方 。 作 
为 网 站 的 开发 者 ， 你 可 以 按照 自己 的 意愿 创建 任意 数量 的 数据 库 ， 但 通常 ， 创 建 一 个 数 
据 库 就 可 以 满足 网 站 的 需求 。 这 没有 一 定之 规 ， 但 一 般 而 言 ， 一 个 网 站 或 应 用 程序 对 应 
一 个 数据 库 是 最 合理 的 。 



































对 象 存储 

















对 象 存储 (object store) 相当 于 保存 数据 的 桶 。 如 果 你 使 用 过 传统 的 关系 型 数据 库 ， 则 
可 以 将 对 象 存储 想象 成 一 张 表 。 大 致 说 来 ， 如 果 Web 应 用 程序 有 一 个 数据 库 ， 那 么 ， 
其 中 存储 的 每 一 种 类 型 的 数据 都 相应 地 会 有 一 个 对 象 存 储 。 假 如 一 个 网 站 需要 持久 保 
留 文献 文章 和 用 户 记 的 笔记 ， 那 么 你 就 可 以 想象 它 有 两 个 对 象 存储 。 和 关系 型 数据 库 
表 不 同 ， 对 象 存储 不 需要 一 个 严格 的 列 结构 来 指明 数据 如 何 存储 。 例 如 ， 在 一 个 名 为 
person 的 MySQL 数据 库 表 中 ， 你 可 以 使 用 两 个 字符 类 型 的 列 存储 姓 和 名 ， 使 用 一 个 数 
值 类 型 的 列 存储 年 龄 。 在 IndexedDB 中 ， 数 据 存储 更 宽松 。 可 以 存储 一 个 有 名 有 姓 但 
没有 年 龄 (年龄 未 知 ， 或 年 龄 太 大 ) 的 person 对 象 ， 同 时 还 可 以 另外 存储 一 个 有 适当 
年 龄 的 person 对 象 。IndexedDB 让 你 可 以 更 灵活 地 存储 数据 。 这 有 利 有 次， 因为 可 以 
“混合 ”并 不 意味 着 应 该 混合 ! 

















索引 


这 是 “IndexedDB” 一 词 中 “Indexed”( 即 索引 ) 的 由 来 。 索 引 是 一 种 从 对 象 存储 中 检 
索 数 据 的 方式 。 你 可 以 总 是 从 对 象 存 储 中 获取 所 有 数据 ， 但 许多 时 候 ， 你 会 希望 通过 一 
个 特定 的 属性 获取 数据 。 例 如 ， 如 果 你 正在 存储 人 员 信 息 ， 那 么 可 能 会 希望 后 续 通 过 姓 
名 、 社 会 保障 号 或 者 性 别 来 获取 数据 。 通 过 使 用 索引 ， 你 可 以 让 IndexedDB 系统 简化 
通过 那些 属性 获取 数据 的 过 程 。 









































随 着 讨论 进行 ， 你 会 了 解 到 其 他 一 些 重 要 的 IndexedDB 术语 ， 但 这 三 个 将 是 你 在 整个 开发 
过 程 中 遇 到 的 最 主要 的 术语 。 
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.3 ”检查 lIndexedDB 支 持 





因为 IndexedDB 尚未 获得 广泛 文 持 ， 所 以 在 实际 使 用 之 前 检查 浏览 器 对 它 的 支持 情况 很 重 


要 。 


最 简单 的 方法 是 检查 window 对 象 。 


if("indexedDB" in window) { 


} 


当然 ， 也 可 以 把 上 述 代 码 写 成 一 个 函数 ， 如 下 所 示 。 





function idbOK() { 
return "indexedDB" in window; 


} 


考虑 到 iOS 8 对 IndexedDB 的 支持 存在 严重 的 问题 ， 你 可 能 希望 修改 代码 ， 以 便 在 那些 平 
台 上 返回 false。 下 面 这 条 StackOverflow 上 的 回复 (http://stackoverflow.com/a/9039885) 
提供 了 一 种 简单 实用 的 正则 表达 式 文本 。 











function idbOK() { 
return "indexedDB" in window && 
!/ipad|ipPhone|ipod/.test(navigator.platform); 


} 


4.4 使 用 数据 库 


如 上 所 述 ， 数 据 库 是 数据 的 顶层 容器 。 创 建 几 个 数据 库 、 如 何 命 名 等 都 完全 由 你 决定 。 创 
建 数据 库 时 ， 需 要 提供 一 个 名 称 和 版 本 。 版 本 号 通常 从 1 开始， 可 以 是 任意 值 ， 但 很 重 
要 。 数 据 库 结构 〈 指 对 象 存 储 和 索引 ， 而 不 是 实际 数据 本 身 ) 只 能 在 更 改版 本 时 调整 。 也 
就 是 说 ， 如 果 你 有 一 个 实际 的 Web 应用， 并 需要 存储 一 些 新 类 型 的 数据 ， 那 么 就 需要 增加 
版 本 ， 生 成 一 个 新 的 版 本 号 。 


在 IndexedDB 中 ， 你 所 做 的 所 有 操作 都 是 异步 的 。 因 此 ， 打 开 数 据 库 并 不 意味 着 立即 就 可 
以 使 用 ， 而 是 需要 在 响应 一 个 事件 之 后 才能 开始 使 用 。 打 开 数 据 库 操作 可 以 触发 的 事件 包 


插 success、error、upgradeneeded 和 btLocked。 






































前 两 个 就 不 需要 解释 了 ， 但 其 他 两 个 是 什么 意思 呢 ? upgradeneeded 在 用 户 首次 访问 数据 
库 或 者 版 本 号 发 生变 化 时 被 触发 ,这 是 设置 数据 结构 的 地 方 。blocked 在 数据 库 不 可 用 或 
者 无 法 使 用 时 被 触发 。 示 例 4-1 展示 了 一 个 打开 数据 库 的 简单 场景 。 我 们 实际 上 没 用 数据 
库 做 任何 事 ， 只 是 尝试 打开 它 。 

















示例 4-1 test_1_1.html 
<!doctype html> 
<html> 
<head> 
<script type="text/javascript" src = 
"http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
</head> 


<body> 
<script> 
function idbOK() { 


return "indexedDB" in window; 


} 


var db; 
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$(document).ready(function() { 


// 不 支持 ?偷偷 撒 撒 嘴 
if(!idbOK()) return; 


var openRequest = indexedDB.open("ora_idb1",1); 


openRequest.onupgradeneeded = function(e) { 
console.log("running onupgradeneeded"); 


} 


openRequest.onsuccess = function(e) { 
console.log("running onsuccess"); 
db = e.target.result; 


} 


openRequest.onerror = function(e) { 
console.log("onerror!"); 
console.dir(e); 


} 
]); 
</script> 


</body> 
</html> 





可 以 看 到 ， 人 ?支持 mdexedDB。 如 果 支 持 ， 则 使 用 indexedDB. 
open 方法 打开 数据 库 。 第 一 个 参数 是 数据 库 名 称 。 由 于 一 个 IndexedDB 数据 库 只 供 一 个 
人 
次 ， 你 可 以 使 用 任意 值 ， 但 应 该 从 1 开始 。 


该 方法 会 返回 一 个 请 求 对 象 ， 你 可 以 在 上 面 添 加 事件 监听 器 。 以 上 代码 包含 除 blocked 
之 外 的 所 有 事件 的 监听 器 。 第 一 次 运行 这 段 代 码 时 (假设 你 正在 使 用 的 浏览 器 支持 
IndexedDB) ， 你 可 以 在 控制 台中 看 到 如 图 4-1 所 示 的 输出 信息 。 















































10:43:27.006 running onupgradeneeded 
10:43:27.008 running onsuccess 








图 4-1: 注意 运行 的 事件 


因为 这 是 第 一 次 使 用 数据 库 ， 所 以 upgradeneeded 事件 会 被 触发 。 同 时 ， 这 也 表示 数据 库 
本 身 创建 完成 。 如 果 重 复 这 个 过 程 ， 则 只 有 success 事件 会 被 触发 (如 图 4-2 所 示 )。 























10:45:18.190 running onsuccess | 











图 4-2: 因为 数据 库 已 经 存在 ， 而 且 版 本 没有 发 生变 化 ， 所 以 只 触发 了 一 个 事件 
以 上 就 是 基本 的 数据 库 使 用 知识 。 接 下 来 ， 我 们 将 进一步 讨论 对 象 存 储 。 


4.5 ”使 用 对 象 存储 


前 面 已 经 说 过 ，IndexedDB 对 象 存储 有 点 像 SQL 数据 库 表 。 该 只 包含 一 种 “类 型 ”的 
下 所 ， 比如 “people”“notes” 或 其 他 对 象 的 实例 。 es 每 个 需要 持久 化 的 数据 类 型 
都 有 一 个 对 象 存储 。 


对 象 存储 只 能 在 upgradeneeded 事件 处 理 期 间 创建 。 这 就 是 版 本 号 很 重要 的 原因 。 假 设 你 
设计 的 数据 库 支持 两 种 对 象 存储 。 数 月 之 后 ， 你 又 决定 存储 第 三 种 类 型 的 数据 。 你 需要 做 
两 件 事 : 第 一 ， 更 改版 本 号 ; 第 二 ， 编 写 代 码 ， 增 加 新 的 对 象 存储 。 


你 可 以 像 下 面 这 样 考虑 这 个 过 程 : 














练 






































请 求 打 开 数 据 库 ， 
如 果 请 求 触 发 了 一 个 upgradeneeded 事 件 , 则 创建 对 象 存储 ; 
如 果 请 求 触发 了 一 个 success 事 件 , 则 表明 数据 库 已 经 准备 就 绪 。 


4.5.1 创建 对 象 存储 


要 创建 对 象 存储 ， 首 先 应 该 检查 它 是 否 已 经 存在 。 可 以 利用 数据 库 变量 (从 打开 数据 库 操 
作 的 事件 处 理 器 获得 ) objectSstoreNames 属性 。 该 属性 是 一 个 DOMStringList 实例 ， 你 
可 以 查看 它 是 否 已 经 包含 了 某 个 值 。 如 果 没 有 ， 则 可 以 调用 create0bjectStore("name" 
options) 0 让 我 们 看 一 下 示例 4-2。 









































示例 4-2 test_2_1.html 


<!doctype html> 
<html> 
<head> 
<script type="text/javascript" src = 
"http://ajax.googleapis.com/ajax/\libs/jquery/2.1.0/jquery.min.js"></script> 
</head> 


<body> 


<script> 
function idbOK() { 
return "indexedDB" in window; 


} 





使 用 IndexedDB | 29 


var db; 
$(document).ready(function() { 


// 不 支持 ?偷偷 撒 撒 嘴 
if(!idbOK()) return; 


var openRequest = indexedDB.open("ora_idb2",1); 


openRequest.onupgradeneeded = function(e) { 
var thisDB = e.target.result; 
console.log("running onupgradeneeded"); 
if(!thisDB.objectStoreNames.contains("first0S")) { 


console.log("makng 


a new object store"); 


thisDB.createObjectStore("first0S"); 


} 


openRequest.onsuccess = function(e) { 
console.log("running onsuccess"); 


db = e.target.result; 


console.dir(db.objectStoreNames); 


} 


openRequest.onerror = function(e) { 
console.1log("onerror!"); 


console.dir(e); 


入 


</script> 
</body> 
</htmL> 


在 检查 并 确认 浏览 器 支持 IndexedDB 之 后 ， 打 开 数 据 库 (注意 ， 本 例 使 用 的 数据 库 名 和 上 





个 示例 不 同 )。 如 果 upgradeneeded 习 
库 版 本 较 老 。 


我 们 通过 e.target.result 取得 数据 





了 件 被 触发 ， 则 意味 着 用 户 第 一 次 访问 页 面 ， 或 者 数据 


库 对 和 象 本 身 。DOMStringList 实例 objectStoreNames 让 





我 们 可 以 使 用 contains 方法 查看 具有 这 个 名 称 的 对 象 存 储 是 否 已 经 存在 。 如 果 不 存 在 ， 那 
就 创建 一 个 。 注 意 ， 我 们 只 传递 了 对 象 存储 名 称 这 一 个 参数 。create0bjectStore 方法 还 允 
许 我 们 使 用 options 对 象 传递 第 二 个 参数 。 使 用 这 个 参数 ， 我 们 可 以 定义 对 象 存 储 的 各 种 





配置 属性 ， 包 括 索引 。 


和 以 前 一 样 ， 第 一 次 运行 时 ，upgra 
(如 图 4-3 所 示 )。 




















deneeded 事件 会 被 触发 。 这 次 ， 它 会 做 些 实际 的 操作 











11:02:23.270 running onupgradeneeded 


11 .502.235270 makng a new object store 
lL:025233272 running onsuccess 
1502:23s273 DOMStringList ["first0S"] 
0: "firstOS" 
length: 1 


bp _proto_: DOMStringListPrototype 








图 4-3: 注意 对 象 存储 的 创建 
下 一 次 请 求 时 ， 只 有 success 事件 的 处 理 器 会 运行 ， 但 对 象 存 储 仍然 存在 (如 图 4-4 所 示 )。 




















11:03:44.158 running onsuccess 
11:03:44.159 DOMStringList ["first0S"] 
0: "firstOS" 
length: 1 


bp _proto_: DOMStringListPrototype 











图 4-4: 我 们 的 小 可 爱 一 一 对 象 存储 


4.5.2 ”定义 主键 

我 们 即将 开始 讨论 索引 ， 但 在 开始 定义 不 同 的 数据 获取 方式 之 前 ， 你 需要 从 一 个 基本 属性 
入 手 ， 即 主键 。 在 对 象 存 储 中 ， 每 条 数据 都 必须 有 一 种 能 够 唯一 地 标识 自己 的 方式 。 例 
如 ， 我 的 名 字 是 Raymond Camden， 世 界 上 当然 还 有 其 他 人 叫 Raymond Camden， 但 我 的 
社会 保障 号 可 以 唯一 地 标识 我 自己 。( 是 的 ， 我 知道 那 只 适用 于 美国 人 ， 但 这 不 是 美国 人 
第 一 次 表现 得 好 像 世界 其 他 国家 的 人 都 与 他 们 一 样 。) 在 定义 对 象 存储 时 ， 你 可 以 定义 如 
何 唯 一 地 标识 数据 。 

实际 上 ， 主 要 有 两 种 定义 方式 。 一 种 是 定义 一 个 key path， 它 本 质 上 是 一 个 永远 存在 并 且 包 
含 唯一 信息 的 属性 。 因 此 ， 如 果 要 定义 对 象 存储 peopte， 那 么 我 会 指定 key path 为 ssn'。 另 
一 种 是 使 用 key generator， 它 本 质 上 是 一 种 生成 唯一 值 的 方式 。 下 面 举 几 个 例子 。 







































































注 1: 即 Social Security number， 社 会 保障 号 。 一 一 编者 注 
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该 示例 创建 了 一 个 名 为 people 的 对 象 存储 ， 并 假定 每 条 数据 都 包含 一 个 名 为 email 的 只 


somedb.createObjectStore("people", {keyPath: "email"}); 


r 

















属性 。 


somedb.createObjectStore("notes", {autoIncrement:true}); 


该 示例 创建 了 一 个 名 为 notes 的 对 象 存 储 ， 并 使 用 一 个 自 增值 自动 为 主键 赋值 。 





somedb.createObjectStore("logs", {keyPath: "id", autoIncrement:true}); 











该 示例 创建 了 一 个 名 为 logs 的 对 象 存储 。 这 一 次 ,使 用 自 增值 并 将 其 存储 在 一 个 名 为 id 














那么 ， 哪 一 个 合适 呢 ? 这 得 视 情况 而 定 。 如 果 存 储 的 数据 有 一 个 属性 应 该 唯一 ， 那 么 你 上 
能 希望 使 用 keyPath 选项 确保 唯一 性 。 如 果 存 储 的 数据 本 身 没 有 唯一 属性 ， 那 么 使 用 自 增 
值 就 是 合理 的 。 请 看 示例 4-3。 














示例 4-3 test_2_2.html 


<!doctype htmL> 
<htmL> 
<head> 
<script type="text/javascript" src = 
"http://ajax.googLeapis.com/ajax/Libs/jquery/2.1.0/jquery.min.js"></script> 
</head> 


<body> 
<script> 


function idbOK() { 
return "indexedDB" in window; 


} 
var db; 


$(document).ready(function() { 


// 不 支持 ?偷偷 撒 撒 嘴 
if(!idbOK()) return; 


var openRequest = indexedDB.open("ora_idb3",1); 


openRequest.onupgradeneeded = function(e) { 
var thisDB = e.target.result; 
console.log("running onupgradeneeded"); 


if(!thisDB.objectStoreNames.contains("people")) { 
thisDB .createObjectStore("people", 
{keyPath: "email"}); 





if(!thisDB.objectStoreNames.contains("notes")) { 


thisDB .createOb 


jectStore("notes", 


{autoIncrement:true}); 


} 


if(!thisDB.objectStoreNames.contains("logs")) { 


thisDB .createOb 


jectStore("logs", 


{keyPath:"id", autoIncrement:true}); 


} 


openRequest.onsuccess = 


function(e) { 


console.log("running onsuccess"); 


db = e.target.resul 
console.dir(db.obje 


} 
openRequest.onerror = f 


console.log("onerro 
console.dir(e); 


]); 
</script> 


</body> 
</html> 


该 示例 的 重点 是 upgradeneeded 习 


t; 
ctStoreNames); 


unction(e) { 
m1"); 





和 件 。 它 创建 了 三 个 对 象 存 储 ， 分 别 展示 了 不 同 的 对 象 存 


储 主键 定义 方式 。 因 为 我 们 还 没有 真正 地 存储 数据 ， 所 以 这 里 没有 太 多 要 看 的 东西 。 


4.5.3 定义 索引 





取 数 据 。 这 很 大 程度 上 取决 于 数 
也 可 以 用 于 定义 数据 的 唯一 约束 





在 指定 数据 的 主键 之 后 ， 需 要 确定 索引 。 如 前 所 述 ， 索 引 定义 了 你 计划 如 何 从 对 象 存 储 获 


据 和 应 用 程序 的 需求 。 索 引 必须 在 创建 对 象 存储 时 创建 ， 
(这 和 主键 不 同 ) 。 





以 下 代码 使 用 对 象 存储 变量 的 实例 创建 索引 。 





objectStore.createIndex("name of index", "path", options); 


第 一 个 参数 是 索引 名 称 ， 第 二 个 参数 是 你 希望 索引 的 数据 属性 。 大 多 数 情况 下 ， 两 个 参数 
都 使 用 相同 的 值 。 最 后 一 个 参数 是 一 组 options 对 象 ， 定 义 如 何 操 作 索 引 。options 对 象 





只 有 两 种 : 一 种 指定 唯一 性 ， 男 
子 )。 下 面 是 两 个 例子 。 














objectStore.createIndex("ge 
objectStore.createIndex("ss 


种 专门 用 于 映射 到 数组 的 数据 ( 稍 后 你 会 看 到 这 样 的 例 





nder", "gender", {unique:false}); 
n", "ssn", {unique:true}); 
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和 你 想 的 一 样 ， 第 一 个 索引 建 在 性 别 属性 上 ， 让 你 可 以 根据 人 的 性 另 


引 建 在 社会 保障 号 属性 上 ， 并 且 是 唯一 的 。 























1 获取 数据 。 


让 我 们 看 一 下 示例 4-4。 该 示例 与 上 个 示例 略 有 不 同 。 因 此 ， 为 了 突出 重点 ， 我 们 只 列 出 























了 upgradeneeded 事件 处 理 器 的 代码 。 








示例 4-4 test_2_3.html 的 一 部 分 


openRequest.onupgradeneeded = function(e) { 
var thisDB = e.target.result; 
console.log("running onupgradeneeded"); 


if(!thisDB.objectStoreNames.contains("people")) { 
var peoptLe0S = thisDB.createObjectStore("people", 
{keyPath: "email"}); 


peopleO0S.createIndex("gender", "gender", {unique: 


peopleO0S.createIndex("ssn", "ssn", {unique:true}); 


} 


if(!thisDB.objectStoreNames.contains("notes")) { 
var notes0S = thisDB.createObjectStore("notes", 
{autoIncrement:true}); 


false}); 


3? 


notesOS.createIndex("title","title", {unique:false}); 


} 


if(!thisDB.objectStoreNames.contains("logs")) { 
thisDB.createObjectStore("logs", 
{keyPath:"id", autoIncrement:true}); 


} 


在 修改 后 的 示例 中 ， 第 一 个 和 第 二 个 对 象 存储 有 索引 。 为 了 创建 索引 ， 


Create0bjectStore 回 的 实例 ， 调 用 了 其 createIndex 方法 。 第 三 个 





个 ) 对 象 存储 没有 索引 ， 那 完全 没 问 题 。 要 记 住 一 点 ， 每 次 新 增 、 


引 都 会 更 新 。 对 于 IndexedDB 而 言 ， 更 多 的 索引 意味 着 更 大 的 姑 


F 销 。 





4.6 操作 数据 


我 们 使 用 了 


(也 就 是 最 后 一 


编辑 或 删除 数据 时 ， 索 


终于 ， 我 们 讨论 完了 IndexedDB 数据 库 的 设置 和 初始 化 。 我 还 不 知道 ， 实 际 地 存储 数据 
是 不 是 令 人 愉快 ? 首先 ，IndexedDB 的 所 有 数据 操作 都 是 在 事务 中 完成 的 。 你 可 以 将 事务 














漠 




















F 发 人 员 而 言 ， 这 





理解 成 操作 的 安全 封装 器 。 如 果 一 个 事务 中 的 某 个 操作 出 现 了 问题 ， 那 么 任何 修改 都 会 回 
演 。 为 了 确保 数据 的 一 到 性 事务 会 设置 操作 的 安全 级 别 。 对 于 姑 
创建 、 读 取 、 更 新 和 删除 数据 等 简单 操作 〈 即 CRUD 操作 ) 都 要 变 得 稍 





意味 着 


记 








微 复杂 一 些 ， 





可 


Web 存储 的 简单 易 用 相 比 尤其 如 此 。IndexedDB 的 事务 特定 于 一 个 或 多 个 对 象 存 储 ， 从 根 





本 上 说 ， 就 是 你 需要 操作 的 存储 。 这 些 存储 可 以 是 只 读 的 ， 也 可 以 是 可 读 写 的 。 也 就 是 
说 ， 你 可 以 修改 数据 库 ， 或 者 仅仅 从 数据 库 读 取 数 据 。 让 我 们 从 创建 数据 开始 介绍 


4.6.1 创建 数据 
要 创建 数据 ， 只 需 调 用 对 象 存储 对 象 的 add 方法 。 下 面 是 最 简单 的 情况 。 























someObjectStore.add(data); 





如 果 对 象 存 储 要 求 你 在 创建 数据 时 传 入 主键 ， 则 可 以 使 用 第 二 个 参数 ， 如 下 所 示 。 


someObjectStore.add(data, somekey); 











最 酷 的 是 ,“ 数 据 ” 可 以 是 任何 类 型 的 一 一 字符 串 、 数 值 、 包 含 字符 串 和 数值 的 对 象 ， 等 
等 。 和 大 多 数 操作 一 样 ， 添 加 数据 也 是 异步 的 。 因 此 ， 你 需要 监听 事件 来 检查 添加 状态 。 
让 我 们 看 一 个 例子 。 在 开始 之 前 ， 我 们 在 浏览 器 中 看 一 下 这 个 演示 程序 。 该 演示 程序 有 两 
个 简单 的 表单 : 一 个 用 于 添加 和 人员 (Add Person) ， 一 个 用 于 添加 笔记 (Add Note) ， 如 图 4-5 
所 示 。 


















































Add Person 


Name 
Email 
Add Person 


Add Note 


Add Note 














4-5: 两 个 保留 数据 的 表单 


第 一 个 表单 要 求 输入 姓名 和 电子 邮件 地 址 ， 而 第 二 个 表单 要 求 输 入 字符 串 。 该 演示 程序 没 
有 包含 任何 形式 的 验证 ， 但 在 真实 的 应 用 程序 中 可 以 加 上 。 在 这 两 个 表单 中 ， 你 只 要 输入 
数据 并 点 击 相应 的 按钮 ， 就 可 以 从 控制 台 看 到 数据 输入 结果 (如 图 4-6 所 示 )。 
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1352:323787 running onsuccess 


13:52:45.454 About to add Raymond Camden/raymondcamden@gmail,.com 
13:52:45.456 Woot! Did it 

13:52:50»729 About to add moo 

13:52505745 Woot! Did it 











图 4-6: 控制 台 显示 数据 输入 成 功 


我 们 并 没有 实际 地 展示 数据 ， 但 目前 为 止 ， 这 已 经 足够 测试 向 IndexedDB 添加 数据 了 。 现 
在 让 我 们 看 一 下 代码 (示例 4-5)。 


示例 4-5 test_3_1.html 
<!doctype html> 
<html> 
<head> 
<script type="text/javascript" src = 
"http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 


</head> 
<body> 


<h2>Add Person</h2> 

<input type="text" id="name" placeholder="Name"><br/> 
<input type="email" id="email" placeholder="Email"><br/> 
<button id="addPerson">Add Person</button> 


<h2>Add Note</h2> 
<textarea id="note"></textarea> 
<button id="addNote">Add Note</button> 


<script> 
function idbOK() { 
return "indexedDB" in window; 


} 


var db; 
$(document).ready(function() { 
// 不 支持 ?偷偷 撒 撒 嘴 
if(!idbOK()) return; 
var openRequest = indexedDB.open("ora_idb5",1); 
openRequest .onupgradeneeded = function(e) { 
var thisDB = e.target.result; 


console.log("running onupgradeneeded"); 


if(!thisDB.objectStoreNames.contains("people")) { 
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var peopLe0S = thisDB.createObjectStore("people", 
{keyPath: "email"}); 


} 


if(!thisDB.objectStoreNames.contains("notes")) { 
var notes0S = thisDB.createObjectStore("notes", 
{autoIncrement:true}); 


} 


openRequest.onsuccess = function(e) { 
console.log("running onsuccess"); 
db = e.target.result; 


// 开 始 监听 按钮 点 击 
$("#addPerson").on("click", addPerson); 
$("#addNote").on("click", addNote); 





} 
openRequest.onerror = function(e) { 


console.log("onerror!"); 
console.dir(e); 


]); 
function addPerson(e) { 
var name = $("#name").val(); 


var email = $("#email").val(); 


console.log("About to add "+name+"/"+email); 





// 获 取 事 务 

// 默 认为 全 部 对 象 存 储 , 事 务 类 型 为 read 

var transaction = db.transaction(["people"],"readwrite"); 
// 请 求 objectStore 


var store = transaction.objectStore("people"); 


// 定 义 person 
var person = { 
name:name， 
email:email, 
created:new Date().getTime() 


} 
// 添 加 数据 


var request = store.add(person); 





request.onerror = function(e) { 
console.log("Error",e.target.error.name); 


// 某 个 类 型 的 错误 处 理 器 
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request.onsuccess = function(e) { 
console.log("Woot! Did it"); 
} 
} 


function addNote(e) { 
var note = $("#note").val(); 


console.log("About to add "+note); 


// 获 取 事 务 

// 默 认为 全 部 对 象 存 储 , 事 务 类 型 为 read 

var transaction = db.transaction(["notes"],"readwrite"); 
// 请 求 objectStore 

var store = transaction.objectStore("notes"); 





// 定 义 note 
var note = { 
text:note， 
created:new Date().getTime() 


} 
// 添 加 数据 


var request = store.add(note); 


request.onerror = function(e) { 
console.log("Error",e.target.error.name); 


// 某 个 类 型 的 错误 处 理 器 





request.onsuccess = function(e) { 
console.log("Woot! Did it"); 
} 


} 
</script> 
</body> 
</html> 


该 演示 程序 的 代码 相当 长 ， 所 以 我 们 将 一 块 一 块 地 分 析 。 首 先 ， 我 们 看 一 下 upgradeneeded 
事件 处 理 器 。 它 定义 了 两 个 对 象 存 储 ， 一 个 名 为 people， 一 个 名 为 notes。 对 于 people， 
我 们 将 key path email 定义 为 主键 ， 对 于 notes， 我 们 使 用 了 一 个 自 增值 。 这 是 随意 定 的 : 
对 于 这 个 演示 程序 ， 我 们 选用 电子 邮件 地 址 作为 people 的 唯一 标识 ， 而 notes 有 一 个 人 为 
赋予 的 主键 。 









































注意 ， 我 们 实际 上 是 直到 数据 库 onsuccess 处 理 器 运行 ， 才 开始 处 理 表 单 提交 的 。 这 是 对 
的 ， 因 为 我 们 不 能 在 数据 库 准 备 好 之 前 添加 数据 。 但 也 要 注意 ， 我 们 将 变量 db 复制 到 了 
全 局 作用 域 。 这 让 我 们 有 一 个 数据 库 对 象 句柄 ， 可 以 在 后 续 添加 数据 时 使 用 。 

















现在 ， 把 注意 力 转移 到 addPerson 函数 上 。 该 函数 在 第 一 个 表单 提交 时 运行 。 在 取得 表单 
的 值 之 后 (再 说 一 次 ， 这 里 可 以 添加 验证 )， 我 们 开始 操作 IndexedDB 数据 库 。 首 先 ， 创 
建 一 个 事务 。 然 后 ， 定 义 该 事务 ， 指 定 我 们 感 兴趣 的 对 象 存储 及 所 需 的 事务 类 型 。 
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var transaction = db.transaction(["people"],"readwrite"); 
然后 ， 我 们 从 事务 请 求 对 象 存 储 。 

var store = transaction.objectStore("people"); 
现在 开始 有 趣 了 。 我 们 需要 定义 存储 什么 数据 。IndexedDB 让 你 几乎 可 以 存储 任何 你 希望 
存储 的 数据 。 因 此 ， 存 储 什么 数据 完全 取决 于 应 用 程序 的 需求 。 在 本 例 中 ， 我 决定 使 用 
表单 的 值 ， 以 及 一 个 表示 人 员 创 建 时 间 的 时 间 惟 。 说 明 一 下 ， 这 是 任意 的 。 这 里 只 是 要 说 
明 ， 数 据 的 形式 由 你 决定 。 























var person = { 
name :name, 
email:email, 
created:new Date().getTime() 


} 
现在 看 一 下 如 何 保留 数据 。 实 际 的 存储 请 求 相 当 简 单 





var request = store.add(person); 





但 是 ， 因 为 这 个 过 程 是 异步 的 ， 所 以 我 们 需要 监听 结果 。 在 本 例 中 ， 我 们 监听 错误 事件 和 
成 功 事件 ， 并 简单 地 使 用 控制 台 显示 相关 信息 。addNote 函数 的 执行 过 程 与 此 类 似 ， 唯 一 
的 不 同 是 使 用 的 对 象 存储 和 实际 保存 的 数据 。 








4.6.2 读 取 数据 

数据 读 取 也 是 异步 的 ， 而 且 也 需要 使 用 事务 。 除 此 之 外 ， 就 非常 简单 了 : some0bjectSstore. 
get(primaryKey)。 下 面 的 演示 程序 是 在 上 一 个 的 基础 上 构建 的 ， 如 图 4-7 所 示 。 这 里 新 增 
了 两 个 表单 ， 让 你 可 以 根据 主键 获取 数据 。 
































Get Person 


Get Person 


Get Note 


Get Note 











图 4-7: 美观 的 数据 检索 表单 
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由 于 该 演示 程序 的 代码 和 上 一 个 演示 程序 非常 像 ， 因 此 我 们 只 需要 重点 看 一 下 新 表单 的 事 
件 处 理 器 (示例 4-6)。 





示例 4-6 ”test_3_2.html 的 一 部 分 


function getPerson(e) { 
var key = $("#getemail").val(); 
if(key === "") return; 


var transaction = db.transaction(["people"],"readonly"); 
var store = transaction.objectStore("people"); 


var request = store.get(key); 


request.onsuccess = function(e) { 
var result = e.target.result; 
console.dir(result); 


} 


request.onerror = function(e) { 
console.log("Error"); 
console.dir(e); 


} 


function getNote(e) { 
var key = $("#getnote").val(); 
if(key === "") return; 


var transaction = db.transaction(["notes"],"readonly"); 
var store = transaction.objectStore("notes"); 


var request = store.get(Number(key)); 


request.onsuccess = function(e) { 
var result = e.target.result; 
console.dir(result); 


} 


request.onerror = function(e) { 
console.log("Error"); 
console.dir(e); 


} 


先 看 一 下 getPerson 函数 。 在 取得 希望 加 载 的 主键 的 值 之 后 ， 我 们 再 次 创建 了 一 个 
注意 ， 这 次 创建 的 是 一 个 只 读 事 务 。 然 后 ， 我 们 只 需要 像 下 面 这 样 获 取 数 据 。 


二 





var request = store.get(key); 


在 success 事件 处 理 器 中 ， 我 们 将 结果 显示 在 控制 台 上 ， 如 图 4-8 所 示 。 








{name: "Raymond Camden", email: "raymondcamden@gmail.com", 


1441479165455} 
created: 1441479165455 
email: "raymondcamden@gmail.com" 
name: "Raymond Camden" 


= 


_proto_: Object 





created 








图 4-8: 一 个 数据 库 对 象 的 数据 

















如 果 你 试图 获取 一 个 不 存在 的 对 象 ， 那 么 success 事件 处 理 器 仍然 会 运行 ， 但 结果 未 定义 。 














为 了 让 这 个 演示 程序 正常 运行 ， 你 至 少 要 创建 一 条 记录 ， 并 记 下 使 用 过 的 电子 邮件 地 址 。( 在 








本 章 后 面 ， 我 们 将 看 一 下 如 何 使 用 开发 者 工具 查看 IndexedDB， 看 看 它 存储 了 什么 数据 。) 


4.6.3 ”更 新 数据 





可 能 你 已 经 猜 到 我 要 讲 什么 了 。 你 需要 再 次 获取 一 个 事务 ， 然后 使 用 事务 返回 的 对 象 存 储 
变量 ， 调 用 其 put 方法 存储 数据 。 这 可 以 像 some0bjectSstore.put(data) 一 样 简单 ， 但 你 也 


可 以 使 用 第 二 个 参数 指定 主键 。 








下 面 的 演示 程序 要 稍微 复杂 一 些 。 现 在 ， 你 需要 输入 现 有 人 员 的 电子 邮件 地 址 (再 次 提醒 
一 下 ， 务 必 输 入 与 上 个 演示 程序 完全 相同 的 数据 )。 当 你 输入 的 电 














电子 邮件 地 址 所 对 应 的 人 


员 存 在 时 ， 程 序 会 填写 表单 。 这 样 ， 你 就 可 以 更 新 数据 了 (如 图 4-9 所 示 )。 





Get Person 


ondcamden@gmail.com Get Person 


Raymond Camden! 
raymondcamden@gmail 
Update Person 


[| Insp... EX © 0%... | 区 sweE . | © Perom EE Net... | 号 st. 日 -回回 2 1 




















® Net @ css © js @ Securty ~ © Logging Clear (Q Fite 
15:;09:46.159 running onsuccess 
15:09:53.350 {name: "Raymond Camden", email: "raymondcamden@gmail.com", created: 1441479165455} 


created: 1441479165455 
email: "raymondcamden@gmail.com'" 
name: "Raymond Camden" 

} _proto_: Object 


15:09:57.387 About to update Raymond Camden!/raymondcamden@gmail,.com 


15:09:57.395 Woot! Did it 











图 4-9: 数据 更 新 示例 
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加 载 人 员 信 息 的 代码 和 上 一 个 演示 程序 一 样 。 示 例 4-7 展示 了 这 个 例子 的 关键 代码 。 








示例 4-7 ”test_3_3.html 的 一 部 分 


function getPerson(e) { 
var key = $("#getemail").val(); 
if(key === "") return; 


var transaction = db.transaction(["people"],"readonly"); 
var store = transaction.objectStore("people"); 


var request = store.get(key); 


request.onsuccess = function(e) { 
var result = e.target.result; 
console.dir(result); 
$s("#name").val(result.name); 
$s("#email").val(result.email); 
$s("#created").val(result.created); 


} 


request.onerror = function(e) { 
console.log("Error"); 
console.dir(e); 


} 


function updatePerson(e) { 
var name = $("#name").val(); 
var email = $("#email").val(); 
var created = $("#created").val(); 


console.log("About to update "+name+"/"+email); 





// 获 取 事 务 

// 默 认为 全 部 对 象 存 储 , 事 务 类 型 为 read 

var transaction = db.transaction(["people"],"readwrite"); 
// 请 求 objectStore 

var store = transaction.objectStore("people"); 


var person = { 
name:name， 
email:email, 
created:created 


， 
// 执 行 更 新 


var request = store.put(person); 





request.onerror = function(e) { 
console.log("Error",e.target.error.name); 


// 某 种 类 型 的 错误 处 理 器 








request.onsuccess = function(e) { 
console.log("Woot! Did it"); 
} 
} 

















getPerson 函数 的 代码 和 上 一 个 例子 类 似 。 现 在 ， 我 们 使 用 该 方法 的 返回 结果 做 一 些 具体 
的 操作 ， 更 新 表单 。updatePerson 函数 只 需要 获取 表单 的 值 ， 并 使 用 刚刚 介绍 的 put 方法 
将 其 持久 化 。 重 申 一 下 ,为 了 让 应 用 程序 更 稳定 ， 上 述 代码 中 有 多 处 可 以 添加 验证 ， 但 这 




















里 ， 你 知道 就 行 了 。 


4.6.4 删除 数据 


现在 ， 让 我 们 看 一 下 CRUD 操作 的 最 后 一 部 分 








删除 数据 。 同 样 ， 该 操作 也 要 在 事务 中 


进行 ， 而 且 也 是 异步 的 。 删 除 方法 很 简单 : some0bjectsStore.delete(primaryKey)。 同 样 ， 
最 后 一 个 演示 程序 也 很 简单 。 它 会 提示 你 输入 一 个 人 的 电子 邮件 地 址 ， 然 后 删除 那个 人 的 





相关 信息 (如 图 4-10 所 示 )。 





Delete Person 


ondcamden@gmail.com Delete Person 


民 EE 2 区 到 ©@. | 区 Si © Per... 





三 | 号 回 - 四 回 2 











cancelable: false, defaultPrevented: false, timeStamp: 
1441484386264592, originalTarget: IDBRequest, 
explicitOriginalTarget: IDBRequest, NONE: 0} 

bubbles: false 

cancelable: false 

currentTarget: null N 

defaultPrevented: false 

eventPhase: 0 


v 


explicitOriginalTarget: IDBRequest 
isTrusted: true 
Pp originalTarget: IDBRequest 





® Net © css ©®@ JS ®© Security © Logging Clear ( 
15:18:31.210 running onsuccess 

15:19:46.264 Person deleted 

15:19:46.265 success {target: IDBRequest, isTrusted: true, 


currentTarget: IDBRequest, eventPhase: 2, bubbles: false, 








图 4-10: 删除 人 员 ( 听 起 来 很 残酷 ) 
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示例 4-8 展示 了 点 击 Delete Person 按钮 后 执行 的 代码 。 


示例 4-8 ”test_3_4.html 的 一 部 分 


function deLetePerson(e) { 
var key = $("#email").val(); 
if(key === "") return; 


var transaction = db.transaction(["people"],"readwrite"); 
var store = transaction.objectStore("people"); 


var request = store.delete(key); 


request.onsuccess = function(e) { 
console.log("Person deleted"); 
console.dir(e); 


} 


request.onerror = function(e) { 
console.log("Error"); 
console.dir(e); 


} 


注意 ， 即 使 要 删除 的 人 不 存在 ， 删 除 操作 也 会 触发 success 事件 处 理 器 。 如 果 你 想 把 这 种 
情况 当成 错误 来 处 理 ， 则 需要 首先 获取 那个 人 的 信息 ， 看 一 下 返回 结果 是 否 已 定义 ， 然 后 
再 执行 删除 操作 。 为 了 确保 数据 一 致 ， 整 个 过 程 都 由 事务 控制 ， 这 和 传统 的 关系 型 数据 库 
中 的 事务 非常 像 。 


4.7 获取 所 有 数据 

现在 ， 你 已 经 了 解 了 基本 的 CRUD 操作 。 下 面 ， 我 们 将 讨论 如 何 获取 数据 库 中 的 所 有 (和 
部 分 ) 数据 。IndexedDB 使 用 一 个 名 为 游标 (cursor) 的 东西 遍历 对 象 存储 中 的 数据 。 你 提 
以 将 游标 想象 成 一 只 快乐 的 小 海 狸 ， 它 跑 进 对 象 存储 ， 一 次 取 回 一 条 数据 。 它 每 取得 一 条 
数据 就 带 回来 给 你 ， 而 你 又 要 求 它 去 取 下 一 条 。 游 标 可 以 双 癌 移动 ( 海 狸 也 可 以 )， 也 可 
以 被 限制 在 一 定 的 数据 “范围 ”内 (这 不 太 适 合 海 狸 ， 它 们 是 自由 的 精灵 )。 


和 CRUD 操作 一 样 ， 游 标 也 是 在 事务 内 使 用 。 和 以 前 一 样 ， 你 要 获取 一 个 事务 ， 从 这 个 事 
务 中 获取 一 个 对 象 存储 ， 然 后 在 此 基础 上 打开 一 个 游标 。 下 面 是 一 个 抽象 的 例子 。 

























































































var transaction = db.transaction(["test"], "readonly"); 
var objectStore = transaction.objectStore("test"); 
var cursor = objectStore.openCursor(); 


cursor.onsuccess = function(e) { 
var res = e.target.result; 
if(res) { 
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// 操 作 


res.continue(); 


} 
} 


注意 游标 的 success 事件 处 理 器 。 事 件 结果 包含 “ 海 狸 游 标 ” 妆 前 持 有 的 数据 。 它 还 有 一 
个 continue 方 法。 你 可 以 使 用 该 方法 ， 告 诉 游标 获取 下 一 个 对 象 。 如 果 返 回 结 果 未 定义 ， 
































那 就 表示 已 经 到 达 了 游标 末尾 。 








如 图 4-11 所 示 ， 新 演示 程序 现在 包含 了 一 个 列 出 数据 库 中 所 有 人 的 方法 (以 及 一 个 添加 方 
法 ， 以 防 你 在 上 一 个 例子 中 把 所 有 人 都 删除 了 )。 




















Add Person 


Raymond Camden 
ondcamden@gmail.com 
Add Person 


Show All 


Key foo@foo.com 


name=Foo 
email=foo@foo.com 
created=1441485079313 


Key go0@goo.com 


name=Goo 
email=goo@goo.com 
created=1441485088268 


Key raymondcamden@gmail.com 


name=Raymond Camden 
email=raymondcamden@gmail.com 
created=1441485093508 





4-11: 列 出 数据 的 例子 








因为 前 面 已 经 介绍 过 添加 操作 的 代码 ， 所 以 这 里 我 们 只 关注 列 出 数据 的 代码 (示例 4-9)。 











示例 4-9 test 4 1 


.html 的 一 部 分 


function getPeople(e) { 


var s="" 


3 
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var transaction = db.transaction(["people"], "readonly"); 
var people = transaction.objectStore("people"); 
var cursor = people.openCursor(); 


cursor.onsuccess = function(e) { 
var cursor = e.target.result; 
if(cursor) { 
s += "<h2>Key "+cursor.key+"</h2><p>"; 
for(var field in cursor.value) { 
s+= field+"="+cursor.value[field]+"<br/>"; 
} 
s+="</p>"; 
cursor.continue(); 
} 
} 


transaction.oncomplete = function() { 
$s("#results").html(s); 
} 
} 


不 出 所 料 ， 首 先 需要 获取 一 个 事务 ， 然 后 获取 一 个 存储 ， 最 后 打开 游标 。 每 次 取得 一 个 对 
象 ，success 事件 处 理 器 就 会 运行 。 为 了 更 新 Web 页 面 ， 我 们 将 使 用 变量 s 存放 表示 数据 
的 HTML。 注 意 ， 这 里 使 用 类 似 Handlebars (http:Wwww.handlebarsjs.com) 这 样 的 模板 语 
言 会 更 好 一 些 。 游 标 对 象 包含 一 个 代表 数据 项 主键 的 键 属性 ， 还 包含 一 个 代表 数据 的 值 
属性 。 我 们 可 以 遍历 对 象 中 的 每 个 键 ， 并 追加 到 字符 串 。 在 一 个 “真实 ”的 应 用 程序 中 ， 
你 不 会 这 样 做 。 你 会 知道 数据 包含 的 属性 ， 并 直接 把 它们 输出 。 以 上 只 是 一 段 简单 普通 的 
代码 。 











最 后 一 部 分 很 关键 。 如 何 知道 游标 遍历 是 否 已 经 完成 ? 当 无 法 再 取 到 数据 时 ， 
触发 一 个 complete 事件 。 我 们 可 以 使 用 它 取得 字符 串 变 量 ， 并 注入 DOM。 


使 用 范围 和 索引 

前 面 介绍 的 游标 的 例子 适用 于 显示 所 有 数据 ， 但 通常 ， 你 会 希望 只 操作 数据 的 一 个 子 集 。 
这 就 是 索引 的 用 途 所 在 了 。 索 引 以 数据 的 一 个 属性 为 基础 。 你 可 以 从 那些 数据 中 请 求 位 于 
一 定 范围 内 的 数据 。 


假设 对 象 存 储 people 有 一 个 建立 在 name 上 的 索引 。 你 可 以 请 求 名字 首 字母 大 于 等 于 B 
(比如 B、C、 DD 等 ) 的 范围 内 的 数据 ， 也 可 以 请 求 名 字 首 字母 介 于 “最 小 ” 值 和 T 之 间 的 
数据 。 最 后 ， 你 还 可 以 请 求 首 字母 介 于 R 和 S 之 间 的 数据 。 


若 要 更 复杂 ， 对 于 前 面 所 有 的 例子 ， 你 可 以 在 开 闭 模式 之 间 切 换 。 这 是 什么 意思 呢 ? 假设 
有 一 个 范围 介 于 B 和 E 之 间 。 闭 区 间 包 含 B 和 E 本身， 可 以 提供 以 B 和 EE 开头 的 名 字 ， 
比如 Barry 和 Elric。 开 区 间 提 供 B 和 EE 之 间 的 值 ， 但 不 包含 以 B 和 EE 开头 的 名 字 ， 这 样 
请 求 名 字 的 第 一 个 返回 结果 可 能 是 Corwin。( 没 错 ， 数 值 范围 也 是 可 以 的 。) 
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， 你 还 可 以 创建 上 
使 用 范围 和 使 用 游标 稍 有 不 同 。 

















// 创 建 一 个 IDBKeyRange 


range = IDBKeyRange.upperBound("Camden"); 


cursor = someIndex.openCursor(range); 
// 或 者 


cursor = someIndex.openCursor(range, 


注意 ， 以 上 代码 中 的 范围 设置 了 上 限 "Camden"。 


只 包含 一 个 值 的 “范围 ”， 


比如 以 R 开头 的 名 字 (如 Raymond ) 。 
范围 是 在 索引 上 打开 游标 ， 而 不 是 在 对 象 存储 上 ， 如 下 所 示 。 


"prev"); 


也 就 是 说 ， 在 字符 串 比 较 时 ， 名 字 要 “ 低 





于 ”Camden， 比 如 Cameron 不 低 于 Camden， 而 Cade 就 低 于 Camden。 


范围 是 由 IDBKeyRange API 创建 的 。 该 API 提供 了 upperBound、LowerBound、bound ( 包 














含 上 限 和 下 限 ) 和 only 图 数 。 范 围 会 自动 设置 为 亲 区 间 ， 但 你 可 以 把 fatse 传递 给 














维 第 二 





个 (或 者 bound 函数 的 第 三 个 ) 参数 ， 将 其 设置 为 开 区 间 。 在 默认 情况 下 ， 游标 方向 是 





"forward" 








， 但 在 最 后 一 个 例子 中 ， 你 可 以 看 到 如 何 指定 向 后 遍历 。 


所 有 这 些 都 相当 复杂 ， 让 我 们 看 一 个 例子 。 该 演示 程序 经 过 了 扩展 ， 现 在 你 可 以 通过 名 字 








搜索 人 员 了 ， 如 图 4-12 所 示 。 你 可 以 指定 搜索 名 字 以 某 个 字母 开头 ， 或 以 某 个 字母 结尾 ， 











或 首 字母 介 于 某 两 个 字母 之 间 的 人 。 





Add Person 


Jay 
jay@foo.com 
Add Person 


Search People 


Starting with: B 
Ending with: 
Search 


Key Jay 


name=Jay 


email=jay @foo.com 
created=1441486226022 


Key Ray 


name=Ray 


email=raymondcamden@gmail.com 
created=1441486194446 











4-12: 人 员 搜 索 表单 
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在 尝试 运行 这 段 代 码 之 前 ， 应 该 注意 一 点 ， 就 是 该 示例 使 用 了 一 个 新 的 IndexedDB 数据 
库 。 务 必 在 最 上 面 的 Add Person 表单 里 输入 一 些 值 ， 以 便 你 有 数据 可 以 进行 实际 的 检索 。 
由 于 添加 入 员 不 是 新 功能 ， 因 此 我 们 只 关注 检索 部 分 的 代码 ， 如 示例 4-10 所 示 。 























示例 4-10 ”test_4_2.html 的 一 部 分 


function searchPeopLe(e) { 


var lower = $("#lower").val(); 
var Upper = $("#upper").val(); 
if(Lower == "" && upper == "") return; 
var range; 
if(Lower != "" && upper != "") { 
range = IDBKeyRange.bound(lower, upper); 
} else if(lower == "") { 
range = IDBKeyRange.upperBound(upper); 
} else { 


range = IDBKeyRange.LowerBound(Lower ) ; 


var transaction = db.transaction(["people"],"readonly"); 
var store = transaction.objectStore("people"); 
var index = store.index("name"); 


var s=""; 
index.openCursor(range).onsuccess = function(e) { 
var cursor = e.target.result; 
if(cursor) { 
s += "<h2>Key "+cursor.key+"</h2><p>"; 
for(var field in cursor.value) { 
s+= field+"="+cursor.value[field]+"<br/>"; 


s+="</p>"; 
cursor.continue(); 
} 
} 
transaction.oncomplete = function() { 
// 没 有 结果 ? 
if(s === "") s = "<p>No results.</p>"; 


SC"#results") .htmlCs); 




















检索 函 0 并 做 了 一 点 验证 。 在 这 时 ， 事 情 就 变 得 有 点 微妙 了 
还 记得 吗 ? 我 们 可 以 从 某 个 字母 开始 检索 ， 也 可 以 检索 到 某 个 字母 ， ee 
间 检 索 。 也 就 是 说 ， 我 们 需 三 种 范围 类 型 中 的 一 种 。 这 就 是 接 下 来 的 代码 块 所 做 的 工 





























作 。 它 会 根据 输入 确定 使 用 哪 一 种 范围 类 型 合适 。 这 一 步 完 成 之 后 ， 接 下 来 就 是 打开 事 
务 ， 获 取 对 象 存储 ， 然 后 检索 名 字 索 引 。 


在 获取 游标 时 ， 范 围 会 作为 一 个 参数 传递 。 除 此 之 外 ， 游 标 对 象 的 处 理 和 示例 4-9 一 样 。 


























你 可 能 想 知道 更 复杂 的 检索 如 何 实现 一 一 例如 ， 检 索 已 知名 字 首 字母 和 性 别 、 年 龄 在 
10 到 30 之 间 的 人 。 遗 憾 的 是 ， 复 杂 的 检索 不 是 mdexedDB 擅长 的 事情 。 它 不 会 取代 像 
MySQL 这 样 的 真正 的 SQL 数据 库 引 擎 。 关 于 这 一 点 ， 在 构建 应 用 程序 时 要 牢记 在 心 。 


4.8 关于 IndexedDB 的 更 多 内 容 


关于 IndexedDB ， 我 们 还 有 一 些 细节 没有 介绍 。 让 我 们 再 看 两 个 有 趣 的 使 用 技巧 。 




















4.8.1 存储 数组 
上 文 已 经 提 到 ，IndexedDB 可 以 存储 几乎 任何 数据 ， 甚 至 是 数组 数据 。 例 如 ; 





var person = { 
Name: "Ray", 
age:43， 
background:{ 
born:1973, 
bornIn: "Virginia" 
} 


hobbies:["comics","movies","bike riding"] 


someStore.add(person); 








没 错 ， 这 样 的 确 很 棒 ， 而 且 只 是 一 项 很 简单 的 工作 ， 但 它 提出 了 一 个 有 趣 的 问题 : 如 果 希 
望 根据 业余 爱好 获取 人 员 信 息 ， 那 该 怎么 做 ?” 好 ， 这 就 是 multiEntry 选项 的 用 途 所 在 了 。 
当 在 一 个 基于 数组 的 属性 上 定义 索引 时 ， 只 需 使 用 这 个 选项 并 设置 其 为 true。 

















objectStore.createIndex("hobbies", "hobbies", {unique:false, multiEntry:true}); 


该 语句 告诉 IndexedDB， 将 数组 中 的 每 个 数据 项 以 恰当 的 方式 存储 到 索引 中 ， 这 样 你 就 可 
以 根据 某 个 特定 的 值 获取 某 个 人 的 信息 。 让 我 们 看 一 下 演示 程序 ， 如 图 4-13 所 示 。 
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Add Person 


Ray 
ondcamden@gmail.com 


books,movies 


Add Person 
Search Hobbies 
books Search 
Key books 
name=Ray 


email=raymondcamden@gmail.com 
hobbies=books,movies 
created=1441487275789 


Key books 


name=Spock 
email=spock@gmail.com 
hobbies=books,cookies,beer 
created=1441487258756 








4-13: 人 员 信 息 现 在 包含 业余 爱好 





从 图 4-13 中 可 以 看 到 ， 更 新 后 的 Add Person 表单 包含 了 一 个 业余 爱好 字段 。 在 
测试 的 时 候 ， 应 该 输入 用 逗号 分 隔 的 爱好 列表 ， 而 且 爱 好 之 间 不 能 有 空格 ， 例 如 
cookies ,beer ,movies， 和 而 不 可 以 是 cookies，beer，movies。( 重 申 一 下 ， 在 正式 发 布 的 应 
用 程序 中 ， 你 可 以 在 代码 中 删除 空格 。) 现在 可 以 基于 爱好 检索 了。 输入 一 种 爱好 的 名 称 ， 
你 就 可 以 找 出 所 有 有 此 爱好 的 人 。 让 我 们 看 一 下 代码 ， 由 于 它 和 前 面 的 例子 有 点 不 一 样 ， 
因此 我 们 提供 了 完整 的 代码 清单 (示例 4-11)。 





















































示例 4-11 test_5_1.html 
<!doctype htmL> 
<htmL> 
<head> 
<script type="text/javascript" src= 
"http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
</head> 


<body> 








<h2>Add Person</h2> 

<input type="text" id="name" placeholder="Name"><br/> 
<input type="email" id="email" placeholder="Email"><br/> 
<input type="text" id="hobbies" placeholder="Hobbies"><br/> 
<button id="addPerson">Add Person</button> 

<p/> 


<h2>Search Hobbies</h2> 
<input type="text" id="hobby"><button id="search">Search</button> 


<div id="results"></div> 
<script> 


function idbOK() { 
return "indexedDB" in window; 


} 
var db; 


$s(document).ready(function() { 


// 不 支持 ?偷偷 撒 撒 嘴 
if(!idbOK()) return; 





var openRequest = indexedDB.open("ora_idb7",1); 


openRequest.onupgradeneeded = function(e) { 
var thisDB = e.target.result; 
console.1log("running onupgradeneeded"); 


if(!thisDB.objectStoreNames.contains("people")) { 
var peopLe0S = thisDB.createObjectStore("people", 
{keyPath: "email"}); 


peopleO0S.createIndex("name", "name", 
{unique:false}); 

peopleO0S .createIndex("hobbies", "hobbies", 
{unique:false, multiEntry: true}); 


} 


openRequest.onsuccess = function(e) { 
console.log("running onsuccess"); 
db = e.target.result; 


// 开 始 监听 按钮 点 击 
$("#addPerson").on("click", addPerson); 
$s("#search").on("click", searchPpeople); 





} 


openRequest.onerror = function(e) { 
console.log("onerror!"); 
console.dir(e); 
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]); 
function addPerson(e) { 
var name = $("#name").val(); 
var email = $("#email").val(); 
var hobbies = $("#hobbies").val(); 
if(hobbies != "") hobbies = hobbies.split(","); 


console.log("About to add "+name+"/"+email); 





// 获 取 事 务 

// 默 认为 全 部 对 象 存 储 , 事 务 类 型 为 read 

var transaction = db.transaction(["people"],"readwrite"); 
// 请 求 objectStore 

var store = transaction.objectStore("people"); 


// 定 义 person 
var person = { 
name:name， 
email:email, 
hobbies:hobbies, 
created:new Date().getTime() 


} 
// 添 加 数据 


var request = store.add(person); 


request.onerror = function(e) { 
console.log("Error",e.target.error.name); 


// 某 个 类 型 的 错误 处 理 器 





request.onsuccess = function(e) { 
console.log("Woot! Did it"); 


} 
} 


function searchPeopLe(e) { 


var hobby 


$("#hobby").val(); 

if(hobby == "") return; 

var range = IDBKeyRange.onLy(hobby ) ; 

var transaction = db.transaction(["people"],"readonly"); 


var store = transaction.objectStore("people"); 
var index = store.index("hobbies"); 


Var .S: "> 


index.openCursor(range).onsuccess = function(e) { 





var cursor = e.target.result; 
if(cursor) { 
s += "<h2>Key "+cursor.key+"</h2><p>"; 
for(var field in cursor.value) { 
s+= field+"="+cursor .value[field]+"<br/>"; 


+="</p>"; 
cursor.continue(); 


3 


transaction.oncomplete = function() { 
// 没 有 结果 ? 
if(s === "") s = "<p>No results.</p>"; 
$("#results").html(s); 


4 
</script> 


</body> 
</html> 


这 段 代 码 相当 长 ， 但 实际 上 变化 很 少 。 首 先 ， 请 注意 关于 人 员 的 新 索引 : 








peopleO0S .createIndex("hobbies", "hobbies", 
{unique:false, multiEntry: true}); 


如 前 所 述 ， 设 置 为 true 的 multiEntry 选项 是 这 一 切 可 以 正常 运行 的 魔法 标识 。 现 在 ， 向 
下 滚动 到 addPerson 函数 的 逻辑 。 为 了 存储 数组 ， 我 们 只 需要 将 表单 中 的 字符 串 值 转换 成 
一 个 JavaScript 数组 : 








if(hobbies != "") hobbies = hobbies.split(","); 





后 ， 搜 索 需 要 找 出 完全 匹配 的 数据 项 ， 因 此 ， 使 用 onty 方法 取代 指定 了 起 点 和 终点 的 


6 














< 
加 


o 


var range = IDBKeyRange.only(hobby); 


4.8.2 ”计算 数据 量 
个 演示 程序 将 展示 如 何 计 算 对 象 存储 中 的 数据 量 。 你 可 能 认为 需要 使 用 游标 


历 整 个 表 。 不 过 ， 有 一 种 简 Ri 量 计算 方法 : 使 用 count 方法 。 对 象 存 储 的 
count 方法 ， 其 用 途 和 你 想 的 完全 一 样 一 一 异步 返回 存储 中 对 象 的 数量 。 下 面 是 一 个 例子 。 























db.transaction(["note"], "readonLy" ).objectStore("note" ) .Count().onsuccess = 
function(event) { 
console.log('total is '+event .target.resuLt) ; 


} 
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请 注意 ， 我 们 在 一 行 代码 中 将 各 种 方法 调用 灵活 地 链接 在 了 一 起 ， 同 事 会 认为 我 们 很 酷 ， 
但 那 完全 没有 必要 。 实 际 的 count 值 包含 在 事件 结果 值 中 。 本 书 提供 的 代码 中 有 一 个 这 样 
的 例子 (test_5_2.html)。 


4.9 使 用 开发 者 工具 查看 IndexedDB 


对 于 Web 存储 ，Firefox 和 Chrome 都 提供 了 优秀 的 工具 ， 让 你 可 以 操作 IndexedDB。 如 图 





4-14 所 示 ， 这 是 Firefox 对 IndexedDB 的 支持 。 

















民 | 总 Inspector | > console | @ Debugger | 区 Style Editor | © Performance | 三 Network ”图 2 白 | 效 0 器 x 





人》 时 Cookies 
了 时 Indexed DB 
© http://127.0.0.1:3333 
》 orajidb2 
》 而 ora_idb6 
》 曾 idbpreso jul11 
画 notes 
夯 people 
》 面 ora_idb7 


Object Store Name Key Auto Increment Indexes 








notes true 
people email false 


0 
0 











表 (如 图 4-15 所 示 )。 


4-14: Firefox 开发 者 工具 对 IndexedDB 的 支持 














除了 可 以 查看 数据 库 和 对 象 存储 的 高 级 视图 外 ， 你 还 可 以 选择 一 个 存储 ， 查 看 详细 的 值 列 





mn | 所 Inspector > console | 加 Debugger | 区 swe Editor | © Performance | 芒 Network EEC 日- 图 2 四 | 苏 





人 时 Cookies 
时 Indexed DB 
= 图 http//127.0.0.1:3333 
» 记 ora_idb2 
》 二 ora_idb6 
，》 甸 idbpreso_jul11 
~ 芒 ora_idb5 
序 notes 
people 





Key 





Value 








foo@foo.com {"name":"Foo","email":"foo@foo.com","created":1441485079313} 
goo@goo.com {'name":"Goo","email":"goo@goo.com", "created":1441485088268} 
raymondcamde... {"name":"Raymond Camden","email":"raymondcamden@gmail.com", "created":1441485093508} 








4-15: 数据 视图 














4-16 展示 了 Chrome 如 何 显 示 对 象 存 储 。 注 意 底部 带 斜 杠 的 


数据 。 


圆圈 。 你 可 以 用 它 快 速 删除 








邮 


























Q 罩 Elements Network Sources Timeline Profiles |'Resources | Audits Console PouchDB » >_ 这 忆 | x 
> 由 idbpreso julll - http... |4 PB startfrom key 
> 晤 localforage - http://... # |Key (Key path: "email") Value 
时 ora idbl - http://12..， |0 | "bob@bob. com" 区 本 ee” 
» oraidb2 - http//12.. or 
* 轩 ora_idb3 - http://12... 1437241708192} 
> 旧 orajidb4 ttpy//12 | es "carol", email; "carol@carol,c 
p 时 ora_idb5 ~- http://12... hobbies: ["cookies"], created: 和 
p 是 ora_idb6 - http://12... 挛 "raymondcamden@gmail,. com" i pa ena 
四 ora idb7 RE a 1437241724928} 
个 name 
镶 hobbies 
* 国 Local storage 
* 转 Session storage 
* 国 cookies 
国 Application Cache 
则 Cache Storage eS 








图 4-16: Chrome 中 的 IndexedDB 视图 


4.10 ”浏览 器 支持 和 使 用 建议 


那么 ，IndexedDB 的 浏览 器 支持 情况 如 何 呢 ? 图 4-17 是 来 自 CanIUse.com 的 浏览 器 支持 
报告 。 





IndexedDB BB .rec Global 58.74% + 17.73% = 76.46% 
unprefixed: 58.58% + 17.36% = 75.94% 
Method of storing data client-side, allows indexed database 


queries. 






[eT eT Usage relatve Showall 


x 本 
IE Edge Firefox Chrome Safari Opera iOS Safari Opera Mini rol Y Ene 

















图 4-17: 来 自 CanlUse.com 的 IndexedDB 浏览 器 支持 报告 


IndexedDB 的 浏览 吉 支 持 情况 还 算 不 错 ， 但 并 不 是 特别 好 。 不 过 ， 支 持 情况 正 变 得 越 来 越 


好 ， 甚 至 iOS 很 快 都 〈 可 能 ) 要 提供 支持 了 。 


至 于 建议 用 法 ， 我 认为 ， 用 户 能 够 创建 的 任何 内 容 都 可 以 使 用 IndexedDB 存储 。 你 可 以 用 
它 将 非 私 有 的 内 网 信息 复制 到 本 地 ， 以 便 获得 更 快 的 检索 速度 ， 并 实现 离线 支持 。 你 也 可 
以 复制 游戏 资源 ， 比 如 小 型 音乐 文件 和 游戏 数据 。 





使 用 IndexedDB | 55 


第 5 章 


使 用 Web SQL 





5.1 已 废弃 的 规范 

在 开始 讨论 Web SQL 之 前 ， 我 很 遗憾 地 告诉 你 ， 这 份 规范 已 经 废弃 ， 或 者 说 即将 废弃 ， 
或 者 说 至 少 是 必 将 废弃 。Web SQL 是 一 个 颇 为 有 趣 的 特性 。 它 使 得 你 可 以 在 浏览 器 中 访问 
微型 数据 库 。 对 于 从 事 服务 器 端 开发 的 Web 开发 人 员 而 言 ， 这 特别 有 吸引 力 ， 因 为 他 们 可 
能 对 SQL 已 经 有 了 一 定 的 了 解 。 然 而 ， 由 于 一 些 对 于 本 书 而 言 并 不 重要 的 原因 ， 这 份 规范 
已 经 走 到 了 生命 的 尽头 ， 未 来 (可 能 ) 将 不 复 存 在 。 理 论 上 ， 这 意味 着 你 甚至 不 应 该 读 这 




















Web SQL 在 移动 端 浏览 器 中 获得 了 很 好 的 支持 ， 它 先 于 IndexedDB 而 存在 ， 而 且 比 
IndexedDB 获得 了 更 好 的 支持 。 作 为 开发 人 员 ， 你 完全 有 可 能 遇 到 使 用 了 Web SQL 的 
Web 应 用 。 我 虽然 不 建议 在 新 项 目 中 使 用 Web SQL， 但 希望 本 章 能 够 让 你 对 Web SQL 有 
充分 的 了 解 ， 以 便 在 不 得 不 为 现 有 的 实现 提供 支持 和 帮助 时 ， 知 道 怎么 做 。 




















和 前 面 讨论 的 技术 一 样 ， 该 客户 端 数 据 存 储 技术 也 与 域名 一 一 对 应 。 存 储 限制 差别 很 大 ， 
从 5MB 到 50MB， 其 至 更 大 。 在 深入 介绍 这 项 技术 之 前 ， 让 我 们 先 了 解 几 个 基本 术语 。 


5.2 数据库 基本 术语 


如 果 你 已 具备 传统 关系 型 数据 库 服 务 器 的 使 用 经 验 ， 那 么 可 以 跳 过 这 一 节 ， 继 续 往 下 阅读 。 
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数据 库 
数据 库 是 存储 数据 的 顶层 容器 。 与 IndexedDB 一 样 ， 可 创建 的 数据 库 数量 没有 限制 ， 
但 通常 来 说 ， 一 个 网 站 几乎 总 是 依附 于 一 个 数据 库 。 











表 





表 用 于 存储 一 种 特定 类 型 的 数据 。 与 IndexedDB 的 对 象 存储 不 同 ， 表 对 存储 的 内 容 有 
非常 严格 的 要 求 。 如 果 你 定义 了 一 个 存储 人 员 信息 的 表 ， 它 包含 姓名 、 年 龄 和 性 别 三 
列 ， 那 么 就 只 能 将 值 存储 在 这 些 列 中 。 每 一 列 都 预 设 了 特定 的 数据 类 型 ， 这 是 数据 存储 
必须 满足 的 条 件 。 




















行 
行 是 表 中 独立 的 数据 单元 。 在 上 述 的 人 员 信 息 表 中 ， 一 行 数据 就 代表 一 个 人 。 





5.3 5 me 


要 检查 web SQL 支持 ， 最 简单 的 方法 是 检查 window 对 象 的 openDatabase API， 如 下 所 示 。 





if("openDatabase" in window) { 


} 
为 了 友好 起 见 ， 可 以 将 以 上 语句 换 成 类 似 下 面 这 样 的 函数 。 


function webSQLOK() { 
return "openDatabase" in window; 


} 


5.4 使 用 数据 库 


与 IndexedDB 非常 类 似 ，Web SQL 数据 库 也 有 一 个 名 称 和 版 本 号 。 不 过 ， 与 IndexedDB 
不 同 的 是 ， 版 本 号 不 会 触发 一 个 事件 供 你 执行 更 新 。 相 反 ， 它 会 承担 验证 功能 。 如 果 用 户 
有 一 个 数据 库 的 早期 版 本 ， 那 么 你 可 以 通过 手动 执行 更 新 来 处 理 变化 。 (不 过 ， 我 们 会 展 
示 一 种 更 简单 的 方法 。) 接 下 来 ， 为 数据 库 提 供 一 个 “友好 的 名 称 ”。 据 我 所 知 ， 这 个 名 称 
不 会 再 用 到 。 你 还 需要 指定 数据 库 的 初始 大 小 。 这 是 一 个 估计 值 ， 老 实说 ， 我 见 过 的 大 多 
数 示例 都 使 用 了 同一 个 值 (53MB ) ， 而 且 开发 人 员 实 际 上 并 没有 花心 思 去 弄 清 楚 自 己 真正 
需要 多 大 的 数据 库 。 你 的 代码 将 从 打开 数据 库 开 始 ， 这 是 一 个 同步 API。 












































db = window.openDatabase("name","1","nice name" ,5*1024*1024) ; 


请 注意 ， 我 取得 了 window.openDatabase 调用 的 返回 结果 ， 并 将 其 存储 到 了 变量 db 中 。 稍 
后 ， 你 可 以 用 它 在 数据 库 中 执行 操作 。 让 我 们 考虑 一 个 简单 的 例子 : 打开 数据 库 ， 并 通过 
控制 台 显 示 数 据 库 对 象 本 身 (示例 5-1)。 




















示例 5-1 testl.html 
<!doctype html> 
<html> 
<head> 
<script type="text/javascript" src = 
"http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
</head> 


<body> 
<script> 
function websqlOK() { 


return "openDatabase" in window; 


} 
var db; 


$(document).ready(function() { 


// 不 支持 ?偷偷 撒 撒 嘴 
if(!websqlOK()) return; 





db = window.openDatabase("db1", "1", "Database 1", 5*1024*1024); 
console.dir(db); 

}); 

</script> 


</body> 
</html> 





虽然 这 里 没有 太 多 需要 介绍 的 内 容 ， 但 该 示例 展示 了 使 用 Web SQL 的 基本 代码 。 图 5-1 展 
示 了 Chrome 控制 台 显示 的 数据 库 对 象 。 





可 Database 

version: "1" 

VW__proto_: Database 
Pp changeVersion: function changeVersion() 
Pp constructor: function Databasel() 
Pp readTransaction: function readTransaction() 
ptransaction: function transaction() 

version: (...) 

> get version: function () 
p_proto__: Object 


> 











图 5-1: Chrome 转 储 的 数据 库 对 象 
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5.5 使 用 事务 


在 取得 数据 库 对 象 之 后 ， 就 可 以 开始 进行 各 种 操作 了 。 与 IndexedDB 不 同 ， 操 作 Web SQL 
中 的 数据 相当 简单 (当然 ， 前 提 是 你 了 解 SQL)。 你 将 再 次 用 到 事务 ， 并 且 需 要 将 事务 指 
定 为 只 读 或 可 读 / 写 。 不 过 ， 不管 进行 什么 操作 ， 接 下 来 的 代码 就 都 一 样 了 ， 唯 一 的 变化 
是 SQL。 下 面 这 个 基本 的 例子 将 演示 如 何 打开 一 个 只 读 事务 (前 提 是 你 已 经 创建 了 一 个 
Web SQL 变量 db)。 















































db.readTransaction(function to do stuff, error handler, success handler); 
实际 的 代码 可 能 如 下 所 示 。 


db.readTransaction(function(tx) { 
tx.executeSql("select * from foo"); 
}, function(e) { 
console.log("Db error ",e); 
}, function() { 
console.log("Done"); 


3 


readTransaction 国 数 的 第 一 个 参数 是 一 个 以 事务 对 象 为 参数 的 函数 。 你 可 以 在 那个 对 象 上 
运行 executesql 函数 。 可 能 你 已 经 猪 到 ， 这 就 是 执行 SQL 查询 的 地 方 。 第 二 个 参数 是 错 
误 处 理 器 ， 最 后 一 个 参数 是 success 事件 处 理 器 。 


目前 为 止 ， 一 切 顺利 。 但 这 也 是 情况 变 得 让 人 有 点 困惑 的 地 方 。 首 先 看 看 该 API 的 基本 语法 。 



































tx.executeSql("sql statement", "array of values", "success handler", 
"error handler"); 


现在 先 不 管 第 二 个 参数 ， 我 们 还 会 回 过 头 来 看 它 。 你 最 需要 注意 的 是 ， 处 理 器 的 顺序 ( 先 
是 success 事件 处 理 器 ， 然 后 是 错误 处 理 器 ) 和 事务 调用 中 处 理 器 的 顺序 相反 。 这 很 容易 
混淆 ， 所 以 ， 使 用 这 些 处 理 器 时 要 格外 小 心 。 

让 我 们 扩展 一 下 最 初 的 演示 程序 ， 做 一 些 设置 工作 。 在 数据 库 中 存储 数据 之 前 ， 你 需要 有 
一 张 表 。 所 幸 ， 在 SQL 中 创建 表 并 不 困难 。 示 例 5-2 演示 了 如 何 创 建 一 张 表 。 






























































示例 5-2 test2.html 


<!doctype html> 
<html> 
<head> 
<script type="text/javascript" src = 
"http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
</head> 


<body> 


<script> 
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function websqLOK() { 


return "openDatabase" in window; 


} 
var db; 


$(document).ready(function() { 


// 不 支持 ?偷偷 撒 撒 嘴 
if(!websqlOK()) return; 





db = window.openDatabase("db1", 


db.transaction(function(tx) { 


tx.executeSql("create table if not exists notes(id INTEGER PRIMARY "+ 


"1", "Database 1", 5*1024*1024); 


"KEY AUTOINCREMENT, title TEXT, body TEXT, updated DATE) ") ; 


},dbError,function(tx) { 
ready(); 
})3 


3 


function dbError(e) { 
console.log("Error", e); 


function ready() { 


onsole.log("Ready to do stuff!"); 


上 
</script> 
</body> 
</html> 











后 ， 我 们 使 用 SQL 创建 了 一 张 表 。 这 








种 情况 下 ， 它 不 做 任何 操作 ， 这 是 一 们 





显然 ， 如 果 你 了 解 SQL， 则 所 有 这 些 




















都 很 简单 。 如 果 你 不 了 解 ， 则 有 许多 书籍 和 教程 可 
以 帮 你 了 解 。 示 例 5-2 使 用 SQL 创建 了 一 张 名 为 notes 的 表 。 它 有 一 个 存储 数据 主键 的 列 





id， 两 个 存储 文本 的 列 title 和 body， 以 及 一 个 存储 日 期 值 的 列 updated。 


现在 ， 让 我 们 更 进一步 ， 看 一 下 示例 5-3 这 个 真实 而 简单 的 演示 程序 。 





示例 5-3 test3.html 


<!doctype htmL> 
<htmL> 
<head> 











在 这 个 版 本 中 ， 数 据 库 打开 之 后 ， 我 们 创建 了 一 个 读 / 写 事务 (使 用 db.transaction)。 然 
段 SQL 已 经 完美 地 处 理 了 表 已 经 存在 的 情况 。 在 这 
F 很 酷 的 事情 。 上 文 已 经 提 到 过 ，Web SQL 确实 包含 
版 本 的 概念 ， 也 确实 提供 了 一 种 在 版 本 变化 时 执行 任务 的 方法 ， 但 这 种 设置 形式 要 简单 许 
多 ,而 且 多 半 能 满足 你 的 需求 。 你 可 以 在 那里 执行 多 段 不 同 的 SQL 语句 ， 根 据 需要 创建 任 
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<script type="text/javascript" src = 
"http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
</head> 


<body> 


<h2>Add a Note</h2> 

<form> 

Title: <input type="text" id="title"><br/> 
Body:<br/> 

<textarea id="body"></textarea><br/> 
<button id="addNote">Add Note</button> 
</form> 


<p/> 
<table id="notes" border="1"><tbody></tbody></table> 


<script> 
function websqlOK() { 
return "openDatabase" in window; 


} 
var db; 


$(document).ready(function() { 


// 不 支持 ”偷偷 撒 撒 嘴 
if(!websqlOK()) return; 


db = window.openDatabase("db1", "1", "Database 1", 5*1024*1024); 


db.transaction(function(tx) { 
tx.executeSql("create table if not exists notes(id INTEGER PRIMARY "+ 
"KEY AUTOINCREMENT, title TEXT, body TEXT, updated DATE)"); 
},dbError,function(tx) { 
ready(); 
3 


}); 


function dbError(e) { 
console.log("Error", e); 


} 


var $title, $body, $notesTable; 


function ready() { 
$("#addNote").on("click", addNote); 
$title = $("#title"); 
$body = $("#body"); 
$notesTable = $("#notes tbody"); 
renderNotes(); 





function addNote(e) { 
e.preventDefault(); 
// 没 有 验证 
var title = $title.val(); 
var body = $body.val(); 


db.transaction(function(tx) { 
tx.executeSql("insert into notes(title,body,updated) values(" + 
"+ title + "','" + body + "'," + (new Date().getTime()) +")"); 
},dbError,function(tx) { 
$title.val(""); 
$body.val(""); 
renderNotes(); 


3 
} 


function renderNotes() { 
db.readTransaction(function(tx) { 
tx.executeSql("select * from notes order by updated desc",[], 
function(tx, results) { 
Var rowStr = ""; 
for(var i=0;i<results.rows.length;i++) { 
var row = results.rows.item(i); 
// 使 用 row.col 
rowStr += "<tr><td>" + row.title + "</td>"; 
rowStr += "<td>" + row.body + "</td>"; 
var d = new Date(); 
d.setTime(row.updated); 
rowStr += "<td>" + d.toDateString() + " " + d.toTimeString(); 
rowStr += "</td></tr>"; 
}; 
$notesTable.empty(); 
$notesTable.append(rowStr); 
]); 
},dbError ) ; 


上 
</script> 
</body> 
</html> 





这 个 新 版 本 的 演示 程序 包含 一 个 表单 和 一 个 空 表格 。 表 单 供用 户 输入 笔记 (标题 和 正文 )， 
而 表格 用 于 展示 已 有 的 数据 。 用 户 界 面 就 这 些 内 容 ， 现 在 让 我 们 研究 一 下 代码 。 

















ready 函数 会 在 开头 部 分 创建 表 的 SQL 执行 完成 之 后 运行 。 记 住 ， 这 段 SQL 会 运行 多 次 ， 
但 这 没什么 问题 ， 因 为 它 不 会 重新 创建 第 一 次 运行 时 创建 的 表 。 我 们 在 表单 上 添加 一 个 简 
的 点 击 事件 处 理 器 ， 存 储 儿 个 从 DOM 取 值 的 jQuery 变量 ， 并 立即 运行 renderNotes 函数 。 








I 





























点 击 事件 处 理 器 addNote 只 获取 表单 值 ， 然 后 创建 一 条 SQL 语句 处 理 插入 。 该 SQL 语句 
非常 容易 出 问题 。 我 们 会 在 演示 程序 的 下 一 个 修改 版 本 中 进行 修复 。 该 SQL 语句 执行 完成 


后 ，renderNotes 会 再 次 运行 ， 更 新 显示 内 容 。 
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在 renderNotes 国 数 中 ， 我 们 又 有 一 个 事务 。 但 请 注意 ， 事 务 变 成 了 只 读 事务 。 可 以 看 
到 ， 我 们 查 出 了 所 有 行 ， 并 按照 列 updated 排序 。 这 样 ， 我 们 就 可 以 总 是 最 先 取 到 最 新 的 
数据 。 这 里 暂且 忽略 空 数 组 参数 。SQL 执行 完成 后 ， 我 们 就 可 以 使 用 查询 结果 了 。 事 务 对 
象 本 身 和 查询 结果 作为 参数 传递 给 了 executesqt 的 success 事件 处 理 器 。results 对 象 是 
SQLResultset 的 一 个 实例 。 它 有 一 个 rows 属性 ， 而 该 属性 又 有 一 个 Length 属性 ， 我 们 可 
以 使 用 它 作 为 循环 条 件 遍 历 结果 集 。 为 了 获取 一 行 数据 ， 我 们 使 用 相应 的 行 号 作为 参数 调 
用 了 iten 方法 。 那 个 行 对 象 是 一 个 键 / 值 对 集合 ， 代 表 了 行 中 的 列 。 我 们 使 用 一 个 字符 串 
变量 构造 表格 (是 的 ， 是 的 ， 我 知道 ， 表 格 已 经 过 时 了 ) ， 然 后 追加 到 DOM 上。 图 5-2 展 
示 了 界面 的 样子 。( 是 的 ， 界 面 设 计 可 以 更 美观 。) 



















































































Add a Note 


Title: 
Body: 











Add Note 





another|lmoo llSat Sep 12 2015 12:25:10 GMT+0800 (HKT) 
|moo llmooollSat Sep 12 2015 12:11:22 GMT+0800 (HKT) 
































5-2: 笔记 表单 





好 了 ， 既 然 你 已 经 对 Web SQL 的 工作 原理 有 了 基本 的 认识 ， 那 就 让 我 们 重点 看 一 下 示例 
5-3 中 的 插入 话 句 。 








tx.executeSql("insert into notes(title,body,updated) values(" + 
"+ title + "','" + body + "'," + (new Date().getTime()) +")"); 


在 执行 时 ， 该 语句 会 生成 类 似 下 面 这 样 的 SQL 语句 。 


insert into notes(title, body, updated) 
values('some title', 'some body', 1) 


























以 上 代码 的 问题 是 ， 如 果 表 单 值 本 身 包含 一 个 单 引 号 字符 ， 则 SQL 执行 就 会 中 止 。 通 常 ， 
允许 用 户 输入 参与 动态 SQL 创建 会 导致 所 谓 的 SQL 注入 攻击 。 这 很 讨厌 ， 所 幸 很 容易 修 
复 。 还 记得 第 二 个 空 数 组 参数 吗 ? 你 可 以 使 用 SQL 中 的 “标记 ”表示 变量 ， 而 不 是 通过 连 
接 创建 一 个 动态 SQL 字符 串 ， 然 后 使 用 数组 参数 提供 那些 值 。 这 很 容易 实现 ， 示 例 5-4 对 
此 进行 了 演示 。 








示例 5-4 test4.html 的 一 部 分 


function addNote(e) { 
e.preventDefault(); 
// 没 有 验证 
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var title = $title.val(); 
var body = $body.val(); 


db.transaction(function(tx) { 
tx.executeSql("insert into notes(title,body,updated) "+ 
"values(?,?,?)", [title, body, new Date().getTime()]); 
},dbError,function(tx) { 
$title.val(""); 
$body.val(""); 
renderNotes(); 


}); 
} 
注意 ， 现 在 SQL 成 了 一 个 多 么 简单 的 字符 串 一 一 没有 上航 入 任何 变量 。 之 前 变量 所 在 的 位 
置 ， 现 在 都 成 了 问号 。 它 们 会 被 下 一 个 参数 〈 即 数组 ) 所 包含 的 值 按 同 样 的 顺序 替换 。 


5.6 ”使 用 开发 者 工具 查看 Web SQL 


Chrome 开发 者 工具 提供 了 很 好 的 Web SQL 支持 。 可 以 看 到 ， 在 资源 选项 卡 中 ，Web SQL 
有 专门 的 部 分 ， 甚 中 列 出 了 所 有 已 定义 的 数据 库 。 选 中 一 个 并 展开 后 ， 就 可 以 选择 一 张 表 
来 查看 其 中 所 有 的 数据 了 (如 图 5-3 所 示 ) 。 

























































































© O /locahost3333/cShest4htm x \ | Raymond | 
和 C 俐 口 IJocalhost:3333/c5/test4.html? 交 | 罗 之 名 三 
5 Apps 国 News 国 Bogs 国 cF 作 面 国 ToFolowup 国 work | Inspect » 大 other Bookmarks 
Add a Note 
Title: 
Body: 

4 
Add Note 








ray's worldllparty on||Sat Sep 12 2015 14:51:45 GMT+0800 (HKT) 
another moo Sat Sep 12 2015 12:25:10 GMT+0800 (HKT) 
moo mooo Sat Sep 12 2015 12:11:22 GMT+0800 (HKT) 















































Q 日 Elements Network Sources Timeline Profiles |'Resources | Audits Console » @1>_ | 这 器 | x 





POFrames id lid ltite body Tupdated 
v 目 Web SQL 二 1 moo mooo 1442031082411 
v 旧 dbl 2 上 E another moo 1442031910872 
3 3 ray's world party on 1442040705261 


围 sqlite_sequence 
> 时 IndexedDB 
* 国 Local Storage 
> 二 | Session Storage 
* 国 cookies | 
国 Application Cache | 
四 Cache Storage 






































| 














图 5-3， Chrome 的 Web SQL 视图 
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数据 下 方 有 一 个 空 文本 框 ， 你 可 以 在 此 输入 列 名 对 视图 进行 过 滤 ， 只 保留 所 输入 的 列 和 主 
键 。 有 一 项 功能 比较 隐蔽 ， 就 是 点 击 数据 库 本 身 会 出 现 一 个 控制 台 ， 你 可 以 在 那里 任意 输 
入 SQL 语句 (如 图 5-4 所 示 )。 




















Q Elements Network Sources Timeline Profiles |Resources | Audits Console » @1 > Ce 四, x 


























POFrames > select x* from notes where title like '%m%' 
v 旧 web SQL id title body updated 
p 1442031082411 
EE moo mooo 03108. 
围 notes 


国 sqlite_sequence 
上 国 IndexedDB 
* 国 Local storage 
* 转 Session Storage 
上 国 Cookies 
围 Application Cache 
旧 cache Storage 























图 5-4: 在 开发 者 工具 中 运行 SQL 命令 
正如 本 章 开 头 所 说 ， 你 或 许 不 会 在 新 项 目 中 使 用 Web SQL， 但 如 果 不 得 不 调试 已 有 的 程 
序 ，Chrome 开发 者 工具 就 会 非常 有 用 。 


5.7 浏览 器 支持 和 使 用 建议 


让 我 们 看 一 下 当前 Web SQL 的 浏览 器 支持 情况 ， 如 图 5-5 所 示 。 








Web SQL Database B® -unorF Global 71.32% 


Method of storing data client-side, allows Sqlite database queries 
for access and manipulation 





四 * id 六 
Opera iOS Safari Opera Mini 人 Shrome fon 














图 5-5: 来 自 CanlUse.com 的 Web SQL 浏览 器 支持 报告 


可 以 看 出 ，Chrome、Safari 及 相应 的 移动 版 本 支持 这 项 特性 。 对 于 一 个 已 经 废弃 的 规范 而 
言 ， 这 已 经 不 错 了 。 但 是 可 惜 ， 它 真 的 废弃 了 (或 者 说 即将 废弃 )。 因 此 我 建议 ， 如 果 可 
以 避免 ， 那 就 不 要 使 用 它 。 如 果 你 想 使 用 它 ， 那 么 可 以 使 用 IndexedDB 的 地 方 当然 也 适用 
于 这 里 。 











第 6 和 章 


使 用 库 人 简化 客 尸 端 存 储 





6.1“ 使 用 库 ， 卢 克 …*…” 


好 吧 ， 这 旬 话 并 不 是 原 话 ', 但 请 考虑 这 一 建议 。 客 户 端 存储 是 现代 浏览 器 提供 的 一 个 实用 
的 特性 。 有 鉴于 此 ， 乐 于 助人 的 开发 人 员 创 建 了 可 以 简化 客户 端 存 储 的 库 。 有 时 候 ， 这 些 
库 让 API 更易 用 ， 有 时 候 ， 它 们 增加 了 连 原 生 API 都 不 支持 的 功能 。 和 你 想 的 一 样 ， 有 许 
多 这 样 的 库 可 以 供 你 使 用 ， 但 本 章 将 着 重 介绍 Lockr、Dexie 和 localForage 这 三 个 库 。 




















6.2 ”使 用 Lockr 


我 们 要 介绍 的 第 一 个 库 是 Lockr， 它 封装 了 Web 存储 API (如 图 6-1 所 示 )。 你 可 能 马上 就 
想 知道 究竟 为 什么 要 简化 Web 存储 。 跟 随 我 的 思路 ， 你 一 会 儿 就 知道 原因 了 。Lockr 提供 
了 一 个 类 似 Redis 的 Web 存储 API。 不 过 ， 你 不 必 因 为 从 来 没有 了 听 说 过 Redis 而 担心 。 这 
是 一 个 很 小 的 库 (2.5KB)， 和 本 章 将 要 讨论 的 其 他 库 一 样 ， 它 是 开源 且 免 费 的 。Lockr 的 
主页 为 : https://github.com/tsironis/Lockr。 



































注 1: 此 处 ， 作 者 套用 了 科幻 系列 电影 《星球 大 战 》 中 的 一 名 话 :“ 使 用 原 力 ， 卢 克 。” 在 电影 中 ， 户 克 是 绝 
地 武士 和 原 力 使 用 者 。 编者 注 
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Le@CGKR.. 


A minimal API wrapper for localStorage. Simple as your high-school locker. 


Lockr (pronounced /Ipke’/) is an extremely lightweight library (<2kb when minified), designed to 
facilitate how you interact with localStorage. Saving objects and arrays, numbers or other data types, 
accessible via a Redis-like APl, heavily inspired by node_redis. 





© This repository - Search Pull requests lIssues Gist 后 Eg 四- 


tsironis / lockr @watch~ 8 让 Star 259 YFork 19 
A minimal API wrapper for localStorage 
《> Code 
名 69 commits P 1 branch © 4 releases 总 9 contributors 
© lssues 2 
加 Branch: masterv lockr / 十 注 
i Pull requests 0 
Merge pull request #16 from Diablohu/master “一 RE 
国 Wiki 
医 tsironis authored on Aug8 latest commit 491dab379a 证 
a specs added to specs 2 months ago pe 
目 .gitignore Fixes get function to return object from localStorage 2 years ago 
lh Graphs 
国 LICENSE Update LICENSE 2 years ago 
目 README.md Add CodeClimate badge 7 months ago HTTPS clone URL 
目 bowerjson Update bowerjson to current package version 3 months ago https://eithub.con/1 | 户 
= . _ You can clone with HTTPS, SSH, 
国 gruntfilejs Adds uglification task in Grunt 2 years ago or Subversion @ 
目 lockrjs support for getting non-Lockr value 3 months ago 大 Clone In Dealtop 
目 lockr.minjs Merge with origin/master 4 months a 
i . 于 中 Download ZIP 
目 packagejson 0.8.2 4 months ago 
转 README.md 





6-1: Lockr 的 GitHub 主页 


你 可 以 从 GitHub 获取 源 代码 或 者 通过 Bower 安装 : bower instaLL Lockr。 
只 需 像 包含 其 他 任何 JavaScript 库 一 样 ， 把 它 包 含 到 代码 中 。 





Lockr 的 使 用 相对 简单 。 例 如 ， 下 面 的 语句 设置 了 一 个 值 : 


Lockr .set("name" ，"Raymond'" ) ; 
而 下 面 的 语句 获取 了 一 个 值 : 


Lockr .get("name"); 


下 载 完 成 后 ， 


那么 为 什么 还 要 费事 讨论 它 呢 ? 我 们 来 看 两 个 有 趣 的 例子 。 首 先 ， 看 一 下 示例 6-1。 


示例 6-1 lockr/testl.html 


<!doctype htmL> 
<html> 








<head> 
<script type="text/javascript" src = 
"http://ajax.googleapis.com/ajax/\libs/jquery/2.1.0/jquery.min.js"></script> 
<script src="lockr.min.js"></script> 

</head> 


<body> 
<script> 
$(document).ready(function() { 


Lockr .set("name", "Ray"); 
Lockr .set("age", 43); 


var name = Lockr.get("name"); 
var age = Lockr .get("age'"); 
console.log(name, age + 1); 


// 与 localStorage 对 比 
localStorage.setItem("age_ls", 43); 
console.log(localStorage.getItem("age_ls")+1); 


]) 


</script> 

</body> 

</html> 
以 上 代码 首先 做 了 两 个 简单 的 设置 一 一 名 字 和 年 龄 ， 然 后 获取 它们 的 值 并 在 控制 台 显示 。 
不 过 请 注意 ， 我 们 将 age 的 值 加 了 1。 紧 接着 是 一 个 类 似 的 测试 ， 使 用 了 “常规 ”的 Web 
存储 。 运 行 这 段 代码 ， 你 会 发 现 有 趣 之 处 ， 如 图 6-2 所 示 。 








Ray 44 test1.html:20 
431 test1.html:24 











图 6-2: 比较 Lockr 和 基本 的 Web 存储 














看 到 了 吗 ? 使 用 Lockr 获取 并 修改 数值 的 时 候 ， 可 以 获得 正确 的 结果 。 但 Web 存储 把 什么 
都 当 作 字 符 串 处 理 。 因 此 ， 获 取 年 龄 并 “加 1” 的 结果 是 将 1 追加 到 了 值 的 末尾 。 好 ， 这 
没什么 大 不 了 ， 但 示例 6-2 又 如 何 ? 











示例 6-2 lockr/test2.html 


<!doctype html> 

<html> 

<head> 
<script type="text/javascript" src = 
"http://ajax.googleapis.com/ajax/\libs/jquery/2.1.0/jquery.min.js"></script> 
<script src="lockr.min.js"></script> 
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</head> 

<body> 

<script> 
$(document).ready(function() { 


Lockr .set("stuff", [1,2,3,4]); 
Lockr.set("person", { 

name: "Ray", 

age:43， 

hobbies:["stuff","more stuff"] 
]); 


var stuff = Lockr .get("stuff" ) ; 
var person = Lockr.get("person"); 
console.dir(stuff); 
console.dir(person); 


}); 


</script> 

</body> 

</html> 
在 这 个 示例 中 ， 我 们 使 用 Lockr 获取 并 存储 了 两 个 复杂 对 象 。 在 存储 或 检索 时 ， 我 们 都 没 
有 把 它们 序列 化 为 JSON， 如 图 6-3 所 示 。 

















vArray[4] test2,.html:24 
0: 1 


length: 4 
Pp__proto_: Array[0] 
了 Object test2.htmL:25 
age: 43 
了 hobbies: Array [2] 
0: "stuff" 
1: "more stuff" 
length: 2 
p__proto_: Array[0] 
name: "Ray" 
Pp_proto_: Object 











图 6-3: Lockr 轻松 处 理 复杂 数据 


但 等 一 下 ， 它 还 可 以 更 好 。 当 Web 存储 中 没有 值 的 时 候 ， 你 还 可 以 让 Lockr 的 get API 返 
回 一 个 默认 值 ， 如 下 所 示 。 





var coolness = Lockr.get("coolness", "Infinity!"); 





在 这 段 代码 中 ， A oad coolness 的 值 ， 则 会 返回 "Infinity!"。( 关 于 这 
一 点 ，lockr/test3.html 提供 了 一 个 完整 的 演示 程序 。) 





Lockr 还 支持 hash 这 种 特殊 的 值 类 型 。Lockr 允许 你 向 数组 中 添加 唯一 值 。 如 有 果 你 试图 添 
加 的 值 已 经 存在 ， 那 它 就 不 会 再 次 被 添加 。 例 如 ， 假定 有 一 个 包含 三 个 值 的 数组 [1，8， 
9]， 如 果 你 试图 再 添加 一 个 9， 那么 Lockr 不 会 把 它 追 加 到 数组 中 ， 而 如 果 你 试图 添加 4， 
那么 Lockr 就 会 允许， 数组 则 会 变 成 [1，8，9，4]。Lockr 通过 sadd API 实现 这 一 操作 ， 


如 示例 6-3 所 示 。 





























示例 6-3 lockr/test4.html 


<!doctype htmL> 

<htmL> 

<head> 
<script type="text/javascript" src = 
"http://ajax.googleapis.com/ajax/\libs/jquery/2.1.0/jquery.min.js"></script> 
<script src="lockr.min.js"></script> 

</head> 


<body> 
<script> 


$s(document).ready(function() { 
Lockr .set("testS", []); 


Lockr .sadd("testS" ,1); 
Lockr.sadd("testS" ,2); 
Lockr .sadd("testS" ,3); 
Lockr.sadd("testS" ,2); 
Lockr.sadd("testS" ,2); 
Lockr.sadd("testS" ,1); 


console.log(Lockr .get("testS")); 
console.log(Lockr.smembers("testS")); 


Lockr.srem("testS", 3); 
console.log(Lockr.smembers("testS")); 
console.log(Lockr.sismember("testS", 3)); 
}); 
</script> 


</body> 
</html> 





首先 ， 用 一 个 空 数 组 对 键 tests 进行 初始 化 。 然 后 ， 使 用 sadd 方法 添加 一 些 值 。 不 过 , 在 
所 有 那些 值 都 添加 完 以 后 ， 数 组 中 只 有 1、2、 3 三 个 数据 项 。 你 还 可 以 使 用 smembers 方法 
返回 所 有 的 值 。 
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接 下 来 ， 使 用 sren 方法 删除 一 个 值 。 当 smembers 方法 再 次 返回 时 ， 就 只 剩 下 1 和 2。 最 
后 ，sismember 会 根据 一 个 值 在 hash 中 是 否 存在 ， 返 回 true 或 false。 














总 之 ，Lockr 是 一 个 相当 优秀 且 小 巧 的 库 。 虽 然 Web 存储 已 经 很 容易 使 用 了 ， 但 单单 





Lockr 在 数据 处 理 方面 的 功 角 











省 




















E 就 足以 让 我 感 兴趣 了 。 如 果 再 萎 虑 到 它 令 人 难以 置信 的 小 巧 
程度 ， 这 个 库 就 更 有 吸引 力 了 。 


6.3 使 用 Dexie 简 化 IndexedDB 


接 下 来 ， 我 们 将 看 一 下 Dexie (如 图 6-4 所 示 )。 

















相对 于 略 显 复杂 的 IndexedDB API 而 言 ， 








该 封装 器 要 简单 许多 。 和 本 章 讨论 的 所 有 库 一 样 ， 它 是 100% 免费 且 开 源 的 。http://www. 


dexie.org 提供 了 有 关 该 库 的 更 多 信息 及 下 载 。 





上 =》 4[= 贡 上 


AMinimalistic Wrapper for IndexedDB 


二 Download 


Easy to learn 


Dexie was written to be straightforward and easy to 
leam. If you've ever had to work with native IndexedDB 
then you'll certainiy appreciate Dexie's concise API. 


| pkenghtny 


Basic examples 


var db = new Dexie('MyDatabase'); 


db.version(1) 
.stores({ 
friends: ‘name, age' 


D; 


db.open() 
.catch(function(error){ 
alert('Uh oh : ' + error); 


D; 








Well documented Extendable 

What good is any development tool without great Adding custom methods to your Dexie instance is easy. 

documentation? Dexie is thoroughly explained, and Simply Dexie.addons.push() and you've got a reusable, 

examples are available to help you on your way. chainable method like any other native one. 
Check it out» 











db.friends 


db.friends 
.add({ 
name: ‘Camilla’, 


age: 


D; 








6-4: Dexie 网 站 





对 于 Dexie， 有 三 种 安装 方法 。 你 可 以 使 用 Bower (bower instaLL dexie)、npm (npm 
install dexie), 或 者 直接 从 GitHub 上 下 载 。 








在 将 该 库 加 载 到 Web 页 面 之 后 ， 你 会 发 现 Dexie 的 使 用 非常 简单 。 例 如 ， 下 面 的 代码 创建 
了 一 个 IndexedDB 数据 库 指 针 ， 并 用 一 个 名 为 notes 的 对 象 存储 对 它 进 行 了 初始 化 。 























var db = new Dexie("name-here"); 

db.version(1).stores({ 
notes: 'text ,created' 

3 

db.open(); 





你 可 能 已 经 猪 到 ， 字 符 串 'text,created' 是 期 望 存储 的 数据 属性 。 不 过 ，Dexie 更 进一步 ， 
它 允 许 你 通过 简单 的 标记 定义 这 些 属 性 的 行为 。 例 如 ， 下 面 这 个 版 本 增加 了 一 个 自 增 键 id。 























var db = new Dexie("name-here"); 
db.version(1).stores({ 

notes: '++id, text ,created' 
]); 
db.open(); 








示例 6-4 完整 地 演示 了 该 特性 在 实际 中 的 应 用 。 





示例 6-4 dexie/testl.html 


<!doctype html> 

<html> 

<head> 
<script type="text/javascript" src = 
"http://ajax.googleapis.com/ajax/\libs/jquery/2.1.0/jquery.min.js"></script> 
<script src="Dexie.min.js"></script> 

</head> 


<body> 

<script> 

$(document).ready(function() { 
var db = new Dexie("dexie1"); 
db.version(1).stores({ 

notes:"++id, text,created" 

]); 
db.open(); 
console.dir(db); 

]); 

</script> 


</body> 
</html> 
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总 的 来 说 ， 该 示例 并 没 做 多 少 工 作 ， 它 只 是 创建 了 一 个 经 Dexie 封装 的 数据 库 实例 ， 
console.dir 也 设 有 多 大 用 处 ， 但 如 果 使 用 浏览 器 开发 者 工具 查看 IndexedDB 实例 ， 你 就 
会 看 到 一 个 新 创建 的 数据 库 实 例 dexiel (如 图 6-5 所 示 )。 





Q 上 日 Elements Network Sources Timeline Profiles |Resources | Audits » >_ 闪避 x 
PO Frames 本 Bb |Start from key 
引 web SQL 





准 | Key (Key path: "id") | Value 


v EIndexedDB 
v Edexiel - http://localho... 








筷 text 
鼻 created 
p Enettuts_notes_4 - http:/... 
ora_idb1 - http:/ /localh... 
* 转 Local Storage 
* 国 Session Storage 
* 国 Ccookies 
国 Application Cache 
Cache Storage 











oe 








6-5: 毫 不 费力 地 新 建 一 个 IndexedDB | 


目前 为 止 ， 一 切 顺 利 ， 但 让 我 们 看 几 个 基本 的 CRUD 操作 示例 。 下 面 的 代码 展示 了 如 何 添 
加 数据 。 


db.notes.add( 

{ text:'foo', created:new Date().getTime() } 
).then(function() { 

ConsoLe.Log('Note added. '); 
}).catch(function(err) { 

]); 


如 果 你 熟悉 Promise， 那 么 就 会 觉得 这 种 语法 看 起 来 很 眼熟 。 毫 无 疑问 ， 它 比 你 平常 使 用 
的 事务 API 更 简单 。( 要 知道 ，Dexie 在 后 台 仍 然 会 使 用 事务 ， 只 是 你 在 进行 简单 操作 时 不 
必 考 虑 了 。 如 果 需 要 使 用 Dexie 完成 多 个 CRUD 操作 ， 那 么 也 还 是 有 一 个 事务 API 可 以 使 
用 。 但是， 在 这 个 简短 的 介绍 中 ， 我 们 不 会 涉及 这 个 话题 。 没 错 ， 它 仍然 要 比 IndexedDB 
预 置 的 API 更 简单 。) 











那么 数据 读 取 呢 ? 没 错 ， 同 样 很 简单 : 
db.notes.get(1).then(function(note) { 
console.dir(note); 


由 


更 新 稍微 复杂 一 些 





你 要 将 正在 更 新 的 对 象 的 键 作为 参数 传 入 : 








db.notes .put( 
{ text:'foo', created:new Date().getTime(), key } 
).then(function() { 





| 大 
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console.log('Note updated.'); 
}).catch(function(err) { 
]); 


更 棒 的 是 ， 你 可 以 使 用 put 方法 而 不 传人 主键 。 此 时 ， 它 会 执行 插入 而 不 是 更 新 。 
可 以 只 使 用 put 方法 就 实现 插入 和 更 新 两 种 操作 ， 而 不 必 在 它 和 add 之 间 切 换 。 
最 后 是 删除 操作 : 
db.notes.delete(1).then(function(note) { 
console.log("Removed"); 


]) 
让 我 们 修改 之 前 的 例子 ， 向 数据 库 添加 一 点 儿 数 据 (示例 6-5)。 





示例 6-5 dexie/test2.html 


<!doctype html> 
<html> 
<head> 
<script type="text/javascript" src = 


这 让 你 


"http://ajax.googleapis.com/ajax/\libs/jquery/2.1.0/jquery.min.js"></script> 


<script src="Dexie.min.js"></script> 
</head> 


<body> 
<script> 
$(document).ready(function() { 


var db = new Dexie("dexie1"); 

db.version(1).stores({ 
notes:"++id, text,created" 

]); 

db.open(); 


db.notes .add( 

{ text:"foo",created:new Date().getTime() } 
).then(function() { 

console.log("Note added."); 
}).catch(function(err) { 

console.dir(err); 


下 
]); 
</script> 


</body> 
</html> 


现在 ， 我 们 的 模板 实际 地 添加 了 一 点 儿 数据 。 通 常 ， 你 会 将 这 个 过 程 和 一 个 表单 联系 起 
来 ,但 如 果 你 在 浏览 器 中 打开 这 个 示例 ， 并 查看 开发 者 工具 ， 那 么 就 可 以 看 到 新 增 的 数 
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据 ， 如 图 6-6 所 示 。 








Q 日 Elements Network Sources Timeline Profiles JResources| Audits Console PouchDB Wayback Viewer Ne E23 上 四， X 
POFrames 4 Pb |Start from key 
E we SQL # [Key (Key path: "id") Value 
vIndexedDB 0 1 v {text: "foo", created: 1442873789944，id: 1} 
v Edexiel - http://localho. created: 1442873780944 
id: 1 
~ text: "foo" 
et ex oo 
篇 created 


» Fnettuts_notes_4 - http:/... 
贿 ora_idb1 - http://localh... 
* 转 Local Storage 
* 转 Session Storage 
* 局 Cookies 
围 Application Cache 
司 cache Storage ee 

















6-6: 通过 Dexie 新 增 的 数据 











最 后 一 个 难点 是 搜索 数据 ， 而 这 才 是 Dexie 真正 的 亮点 所 在 。 让 我 们 看 一 个 简单 的 例 
子 一 一 查询 某 个 特定 列 (或 属性 ) 的 值 低 于 目标 值 的 数据 。 





db.something.where("column").below(value).each( 
function(item) { 
console.log('runs for each match') 


2 
你 可 能 想 查 询 高 于 目标 值 的 数据 ， 而 不 是 低 于 目标 值 : 


db.something.where("column").above(value).each( 
function(item) { 
console.log('runs for each match') 


}); 
或 者 介 于 两 个 值 之 间 : 


db.something.where("coLumn" ) .between(vaLue1，vaLue2) .each( 
function(item) { 
console.log('runs for each match') 


站 7 
示例 6-6 简单 地 演示 了 这 个 API。 


示例 6-6 dexie/test3.html 


<!doctype htmL> 

<htmL> 

<head> 
<script type="text/javascript" src = 
"http://ajax.googLeapis.com/ajax/Libs/jquery/2.1.0/jquery.min.js"></script> 
<script src="Dexie.min.js"></script> 

</head> 


<body> 





<script> 
$(document).ready(function() { 


var db = new Dexie("dexie3"); 

db.version(1).stores({ 
people:"email,name,age" 

]); 

db.open(); 


db.people.put({ email:"raymondcamden@gmail.com", name:"Raymond", age:43 }); 
db.people.put({ email:"elric@google.com", name:"Elric", age:23 }); 
db.people.put({ email:"zula@google.com", name:"Zula", age:12 }); 


db.people.where("age").between(20,50).each(function(person) { 
console.log("age match",JSON.stringify(person)); 
]); 


db.people.where("name").anyOf(["Elric","Zula"]).each(function(person) { 
console.log("name match",JSON.stringify(person)); 
]); 
]); 


</script> 
</body> 
</html> 





运 


了 这 个 示例 ， 你 可 能 会 注意 到 输出 有 些 有 趣 (如 图 6-7 所 示 )。 











14:54:02.709 age match {"email":"elric@google.com","name":"Elric","age":23} 
14:54:02.710 name match {"email":"elric@google.com","name":"Elric","age":23} 
14:54:02.711 age match {"email":"raymondcamden@gmail.com","name":"Raymond","age":43} 
14:54:02.711 name match {"email":"zula@google.com","name":"Zula","age":12} 





图 6-7，Dexie 搜索 示例 的 输出 




















虽然 结果 是 正确 的 ， 但 不 要 忘记 ， 它 们 是 异步 生成 的 。 这 就 是 为 什么 你 在 控制 台中 看 到 的 





结果 是 “混合 ”的 。 虽 然 这 未 必 和 本 书 有 关 ， 但 我 们 还 是 快速 介绍 一 下 如 何 处 理 类 似 的 情 
。 前 面 已 经 提 到 过 ，Dexie 支持 事务 ， 而 且 事 务 本 身 知道 自己 何 时 结束 。 示 例 6-7 是 前 
例 的 一 个 修改 版 本 ， 它 使 用 事务 等 待 查询 操作 完成 。 




















示例 6-7 dexie/test4.html 


<!doctype html> 

<html> 

<head> 
<script type="text/javascript" src = 
"http://ajax.googleapis.com/ajax/\libs/jquery/2.1.0/jquery.min.js"></script> 
<script src="Dexie.min.js"></script> 

</head> 
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<body> 
<script> 


$(document).ready(function() { 


var db = new Dexie("dexie3"); 

db.version(1).stores({ 
people:"email,name,age" 

]); 

db.open( ) ; 


db.people.put({ email:"raymondcamden@gmail.com", name:"Raymond", age:43 }); 
db.people.put({ email:"elric@google.com", name:"Elric", age:23 }); 
db.people.put({ email:"zula@google.com", name:"Zula", age:12 }); 


var ageResults, anyResults; 
db.transaction('r', db.people, function() { 
ageQuery = db.people.where("age").between(20,50).toArray().then( 
function(age) { 
ageResults = age; 
})); 
anyQuery = db.people.where("name").anyOf(["Elric","Zula"]).toArray().then( 
function(any) { 
anyResults = any; 


}); 


}).then(function() { 
console.log(JSON.stringify(ageResults)); 
console.log(JSON.stringify(anyResults)); 

]); 


二 


</script> 

</body> 

</html> 
还 请 注意 ， 我 们 修改 了 第 二 个 查询 ， ee toArray。 这 是 Dexie 提供 的 一 个 工 
有 具 ， 可 以 将 查询 结果 返回 到 一 个 简单 的 数组 中 ， 这 意味 着 你 不 需要 使 用 each 方法 对 结果 进 
行 遍历 。 























6.4 ne 


我 们 要 介绍 的 最 后 一 个 库 (但 别 忘 了 ， 还 有 更 多 的 库 ! ) 是 localForage (如 图 6-8 所 示 )， 
它 是 一 个 由 Mozilla 开源 的 项 目 。Firefox localForage 背后 是 各 种 客户 端 存储 封装 器 ， 支 持 
IndexedDB、Web SQL 和 本 地 存储 。 它 可 以 动态 地 选择 最 佳 的 存储 机 制 ， 将 数据 存储 到 用 
户 的 浏览 器 中 。localForage 的 GitHub 主页 是 : https://github.com/localForage/localForage。 














localForage 
Installation 
Data API 
Settings API 


Custom Driver API 


Contribute to localForage 


[TE 


buid | 


mozilla 与 








localForage 


Offline storage, improved. 


localForage is a JavaScript library that improves the offine experience of your web 
app by using an asynchronous data store with a simple, local Storage -like API 
Ht allows developers to store many types of data instead of just strings. 


localForage includes a localStorage-backed fallback store for browsers with no 
IndexedDB or WebSQL support Asynchronous storage is available in the current 
versions of all major browsers: Chrome, Firefox, IE, and Safari including Safari 
Mobile) 


localForage offers a callback API as well as support for the ES6 Promises 
APl, so you can use whichever you prefer. 


Installation 


To use localForage, download the latest release or install with npm (npm install 





local forage) or bower (bower install localforage). 


Then simply include the JS file and start using localForage: <script 
src="localforage.js"></script>. You dont need to run any init method or 
waitfor any onready events. 


javascript coffeescript 


localStora 
doSomethint 


localforage. setItem( 


localforage. se 


npm install localforage 


bower install localforage 





,JSON, stringify( 


dosomethingE lse) 


).thenCdoSomethingElse); 





图 6-8: localForage 网 站 


和 本 章 介绍 的 其 他 库 一 样 ， 有 多 种 方法 可 以 安装 localForage。 你 可 以 使 用 Bower (bower 
install LocaLforage) 、npm (npm install localforage), 或 者 直接 从 GitHub 上 下 载 代码 。 


localForage 的 API 是 完全 异步 的 ， 但 既 支 持 “ 老 式 ” 的 回 








Promise 的 API。 你 可 以 使 用 自己 最 习惯 的 方式 。 




















Tt 


调 ， 也 支持 “新 兴 ” 的 、 基 于 


下 面 这 个 简单 的 例子 展示 了 如 何 设 置 一 个 值 ， 并 在 这 个 值 持 久 化 之 后 执行 回调 函数 。 




















localforage.setItem("name", valuye, function(err, value) { 


}); 





下 面 是 Promise 风格 的 版 本 。 











LocaLforage.setItem("name" ，VvaLue) .then(function(vaLue) { }); 


以 上 两 段 代 码 所 做 的 操作 完全 相同 〈 是 的 ， 从 技术 上 讲 ， 第 二 个 示例 需要 调用 catch)， 





Ba 











此 ， 你 可 以 使 用 任何 在 你 看 来 更 简单 的 方式 。 检 索 一 个 值 的 情况 相同 ， 如 下 所 示 。 








LocaLforage.getItem("name" ，function(err，vaLue) { }); 
LocaLforage.getItem("name" ) .then(function(vaLue) { }); 





示例 6-8 简单 地 展示 了 实际 的 读 写 操作 。 

















注 2: 该 截 





源 




















图 https://mozilla.github.io/localForage， 但 似乎 此 网 页 已 不 存在 。 关 于 
请 见 它 的 GitHub 主页 : https://github.com/localForage/localForage。 一 一 编者 注 

















localForage 的 更 多 信息 ， 
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示例 6-8 localForage/test1.html 


<!doctype htmL> 

<htmL> 

<head> 
<script type="text/javascript" src = 
"http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<script src="localforage.js"></script> 

</head> 


<body> 
<script> 


$(document).ready(function() { 


localforage.setItem("name", "Ray", function(err, value) { 
if(err) console.dir(err); 
console.log(valuye); 


}); 


localforage.setItem("age", 43, function(err, value) { 
if(err) console.dir(err); 
console.log(valuye); 


LocaLforage.getItem("age" ) .then(function(vaLue) { 
console.log("the value of age plus one is "+(value+1)); 
]); 
]); 


]); 
</script> 


</body> 
</html> 




















第 一 个 示例 只 是 将 name 的 值 设 为 Ray。 数 据 存 储 成 功 后 会 激活 回调 函数 。 结 果 回 显 到 控制 
台 上 并 没什么 用 ， 因 为 它 (显然 ) 和 我 们 传 入 的 内 容 相 同 。 第 二 个 示例 存储 了 一 个 数值 ， 
为 了 确保 它 被 正确 地 存储 ， 我 们 获取 这 个 值 并 将 读 值 加 1。 


localForage 提供 的 API 还 包括 删除 数据 (removeItem) 、 清 理 存储 (clear)、 计 算 键 的 数量 
(Length) 以 及 获取 所 有 的 键 (keys)。 你 还 可 以 通过 一 个 简单 的 iterate 调用 ， 遍 历 所 有 
的 键 / 值 对 。 
































localforage.iterate(function(value, key, index) { 
}, callback); 


如 前 所 述 ，localForage 会 设法 使 用 当前 浏览 器 上 “最 好 ”的 存储 方法 。 在 默认 情况 下 ， 
localForage 会 首先 尝试 mdexedDB ， 然 后 是 Web SQL， 最 后 是 本 地 存储 。 最 酷 的 是 ， 你 








然 可 以 规定 一 个 不 同 的 优先 级 。setDriver API 让 你 可 以 指定 希望 使 用 的 系统 ， 或 者 按 顺 序 
指定 一 组 系统 。 下 面 是 一 个 例子 ， 它 优先 选择 Web SQL， 其 次 是 IndexedDB。 


























localforage.setDriver(localforage.WEBSQL, localforage.INDEXEDDB); 


注意 ， 本 地 存储 不 需要 指定 。 如 果 localForage 无 法 找到 优先 选择 的 存储 系统 ， 则 会 自动 采 
用 默认 设置 。 
localForage 没有 提供 任何 查询 或 搜索 功能 ， 在 采用 这 个 特定 的 库 之 前 要 牢记 这 一 点 。 这 意 
味 着 localForage 更 适合 简单 的 存储 需求 ， 比 如 你 希望 通过 键 而 不 是 某 种 特殊 查询 来 检索 的 
大 型 数据 集 。 


6.5 ”更 多 选择 


我 们 已 经 说 过 多 次 ， 本 章 只 介绍 了 少数 几 个 客户 端 存储 库 。 下 面 是 几 个 其 他 的 库 ， 也 许 你 
会 希望 了 解 一 下 。 


。 PouchDB (http://pouchdb.com) 是 一 个 功能 非常 强大 的 可 选 方案 。 实 际 上 , 它 是 如 此 强大 ， 

以 至 于 我 都 担心 在 本 章 的 末尾 对 它 进 行 如 此 简短 的 介绍 太 过 分 了 。 该 库 的 开发 者 已 经 在 
客户 端 存储 领域 做 了 大 量 的 工作 ， 他 们 都 是 这 个 领域 的 知名 专家 。PouchDB 可 能 吸引 
你 的 最 大 的 特点 是 支持 数据 同步 。 

。 lawnchair (http://brian.io/lawnchair) 是 是 一 个 比较 “古老 ”的 库 ， 也 是 通过 适配器 API 支 

® ， 你 还 可 以 仔细 研究 一 下 由 Juho Veps 让 iinen 创建 的 这 个 实用 的 列表 (https://github. 
th ee 中 的 库 。 
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第 7 章 


构建 示例 应 用 程序 





7.1 让 我 们 构建 真实 的 应 用 程序 ! 


你 已 经 了 解 了 多 种 客户 端 存储 技术 ， 以 及 一 些 让 它们 更 容易 使 用 的 库 。 现 在 ， 让 我 们 使 用 
其 中 的 部 分 技术 构建 一 个 简单 但 真实 的 应 用 程序 。 我 们 将 要 构建 的 是 一 个 在 某 公司 (即将 
在 纽约 证 券 交 易 所 上 市 的 “ 卡 姆 登 公司 ”') 内 网 使 用 、 供 用户 查找 同事 的 工具 。 该 应 用 程序 
可 以 使 用 传统 的 应 用 程序 服务 器 模型 构建 ， 但 我 们 决定 使 用 现代 Web 标准 使 其 别出心裁 。 
为 了 实现 准 实时 搜索 ， 我 们 将 使 用 客户 端 存储 ， 在 用 户 的 浏览 器 中 保存 员工 数据 库 的 一 个 
副本 。 当 然 ， 这 将 引出 各 种 有 趣 的 问题 。 


首先 ， 我 们 该 如 何 处 理 同步 ?公司 不 是 一 成 不 变 的 ， 总 是 会 有 人 加 入 或 离开 。 当 然 ， 人 员 
变动 频率 取决 于 公司 本 身 。 但 显然 ， 必 须 考虑 某 种 形式 的 策略 ， 使 用 户 的 数据 副本 与 服务 
器 上 的 真实 列表 保持 同步 。 所 幸 ， 在 这 个 场景 中 ， 我 们 不 必 考 虑 用 户 编辑 。 服 务 器 端 总 
是 “真实 ”的 ， 也 就 是 说 ， 同 步 的 时 候 可 以 不 考虑 客户 端的 变化 。 对 于 这 个 演示 程序 ， 我 
们 根本 不 必 担 心 同步 。 但 在 真实 世界 中 ， 应 用 程序 服务 器 会 提供 一 个 API， 客 户 端 可 以 通 
过 它 告诉 (当然 ， 我 这 里 说 的 告诉 是 指 通 过 代码 ) 服务 器 :“ 我 的 数据 副本 最 后 一 次 更 新 
是 在 2015 年 10 月 10 日 上 午 8:55。” 服 务 器 就 可 以 使 用 这 个 日 期 之 后 发 生 的 一 系列 更 改进 
行 响应 。 那 些 更 改 会 涵盖 删除 操作 (有 人 离开 了 公司 )、 修 改 操作 (有 人 改名 或 者 获得 了 
新 头衔 ) 和 添加 操作 (聘用 了 新 员工 )。 客 户 端 代码 会 应 用 那些 更 改 ， 然 后 记录 当前 时 间 。 
这 样 ， 下 次 向 服务 器 请 求 数据 时 ， 就 可 以 正确 地 接收 到 更 改 后 的 数据 。 


















































注 1: 这 是 作者 用 自己 的 姓氏 开 的 玩笑 。 一 一 编者 注 
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下 一 个 问题 有 点 糠 手 : 隐私 。 对 于 你 不 希望 分 享 的 信息 ， 比 如 工资 ， 公 司 的 数据 库 可 能 做 
了 很 好 的 处 理 。 请 记 住 ， 我 们 实际 上 是 将 私人 信息 发 送 给 了 每 名 员工 。 虽 然 你 可 能 信任 他 
们 ， 但 仍然 不 能 将 员工 的 隐私 暴露 在 风险 之 中 。 一 个 可 能 安全 的 标准 是 “只 分 享 名 片上 的 
信息 ”， 但 在 这 一 点 上 ， 无 疑 需 要 十 分 谨慎 。 要 知道 ， 你 无 法 在 客户 端 “ 过 滤 ” 不 安全 的 
数据 。 如 果 你 的 应 用 服务 器 正在 返回 私人 数据 ， 那 么 任何 人 打开 浏览 器 的 开发 者 工具 都 可 
以 清楚 地 看 到 它 。 用 户 可 以 打开 并 查看 浏览 器 获得 的 任何 数据 。 通 常 ， 我 个 人 习惯 在 浏览 
网 页 时 开 着 浏览 器 工具 ， 并 会 出 于 好 奇 而 本 能 地 查看 AJAX 调用 和 数据 。 我 是 “好 人 ”， 
但 你 必须 假设 “不 像 我 那么 好 的 人 ”也 会 查看 这 些 内 容 。 


最 后 一 个 问题 是 性 能 。 假 如 有 一 个 一 万 人 的 “小 ”公司 ， 你 如 何 高 效 地 将 那些 数据 传输 到 
浏览 器 ?我 们 已 经 说 过 ， 这 里 假定 的 场景 是 公司 内 网 ， 这 就 相当 于 已 经 假定 是 在 桌面 或 局 
域 网 环境 里 ， 但 你 会 希望 知道 将 要 发 送 到 客户 端的 数据 包 的 大 小 。 本 章 稍 后 会 讨论 一 种 应 
对 这 种 情况 的 方法 。 
































二 | 






































好 了 ， 让 我 们 聊 聊 数据 ! 


7.2 示例 数据 

为 了 让 事情 尽 可 能 简单 ， 我 们 的 “服务 器 ”只 是 一 个 简单 的 JSON 数据 文件 。 如 上 所 述 ， 
我 们 不 会 使 用 同步 及 创建 更 新 。 因 此 ， 使 用 一 个 JSON 平面 文件 就 可 以 很 好 地 满足 我 们 的 
需求 了 。 为 了 让 事情 更 简单 ， 我 们 将 使 用 一 个 很 酷 的 免费 API 生成 数据 : 随机 用 户 生成 器 
(https:Wrandomuser.me) ， 如 图 7-1 所 示 。 

















RANDOM USER ENERATOR 


A free APl for generating random user data. Like Lorem Ipsum, but for people. 


于 














POWERED BY RandemAPI 





Hi My name is 


Roberta Garza 








图 7-1: 随机 用 户 生成 器 
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该 网 站 提供 了 一 个 返回 用 户 信息 的 免费 API。 这 些 月 





日 户 信息 包含 许多 细节 ， 可 以 用 在 我 们 





这 里 要 构建 的 演示 程序 中 。 示 例 7-1 是 从 他 们 的 文档 中 摘录 的 一 个 输出 样 例 。 


示例 7-1 API 返回 结果 样 例 
{ 


results: [{ 
user: { 

gender: "female", 

name: { 
title: "ms", 
first: "manuela", 
last: "velasco" 

es 


Location: { 


street: "1969 calle de alberto aguilera", 


city: "La corufia", 
state: "asturias", 
zip: "56298" 

}， 


email: "manuela.velascoSO@Qexample.com", 


username: "heavybutter 
password: "enterprise" 
salt: ">egEn6Ys0", 


fly920", 


浊 


md5: "2dd1894ea9d19bf5479992da95713a3a" ， 
shal: "ba230bc400723f470b68e9609ab7doe6cf123b59" ， 
sha256: "f4f52bf8c5ad7fc759d1d415e508aa0b7946d4ba"， 


registered: "130364724 
dob: "415458547",， 
phone: "994-131-106"， 
cell: "626-695-164", 
DNI: "52434048-I", 
picture: { 


5", 





Large: "http://api.randomuser.me/portraits/women/39.jpg", 
medium: "http://api.randomuser.me/portraits/med/women/39.jpg", 
thumbnail: "http://api.randomuser.me/portraits/thumb/women/39.jpg", 


js 
version: "0.6" 
nationality: "ES" 
]， 
seed: "graywolf" 
}] 
} 


虽然 该 API 相当 地 简单 易 用 ， 但 我 们 希望 在 演示 程序 中 使 用 一 个 静态 数据 集 。 如 果 你 注册 
了 RandomAPI (http:Wwww.randomapi.com) ， 就 可 以 使 用 随机 用 户 API 获取 多 达 10 000 条 














结果 。RandomAPI 网 站 

















不 难 想象 一 是 一 个 提供 随 必 














数据 的 API 集合 。 总 之 ， 这 两 个 





网 站 确实 都 极其 有 用 ， 你 也 可 以 如 











E 自 己 的 应 月 


“切合 实际 ”的 随机 数据 是 一 种 很 棒 的 方法 。 

















程序 中 使 用 它们 。 在 构建 应 用 程序 时 ， 使 用 





针对 这 个 演示 程序 ， 我 注册 并 申请 了 10 000 条 用 户 数据 ， 并 将 数据 保存 在 名 为 users.json 


的 文件 中 。 你 可 以 在 包含 本 书 示例 代码 的 zip 文人 





F 中 找到 


| 它 ， 路 径 为 c7/data。 本 童 前面 已 
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经 讨论 过 ， 对 于 应 用 程序 暴露 什么 数据 ， 要 格外 小 心 。 因 为 我 们 仅仅 是 按 原样 获取 了 随机 
用 户 数据 ， 所 以 其 中 肯定 会 有 一 些 我 们 绝对 不 想 分 享 的 信息 。 不 仅 如 此 ， 对 于 数据 中 的 用 
户 信息 ， 我 们 的 演示 程序 大 约 只 会 使 用 一 半 。 这 意味 着 ， 从 服务 器 发 送 到 前 端的 数据 有 许 
多 就 浪费 了 。 在 准备 交付 的 应 用 程序 中 ， 我 们 对 所 有 这 些 都 要 非常 了 解 。 但 是 ， 回 想 一 下 
我 们 已 经 完成 的 工作 。 我 们 已 经 将 API 进行 了 简化 ， 只 保留 了 可 以 满足 应 用 程序 需求 的 基 
本 信息 。 还 可 以 做 点 其 他 的 什么 事情 ， 来 加 快 数据 加 载 吗 ? 


一 个 简单 的 方法 是 使 用 GZip 压缩 。Web 服务 器 可 以 使 用 这 个 设置 ， 在 数据 资产 发 送 给 浏 
览 器 之 前 ， 对 其 进行 zip 压缩 。Web 服务 器 足够 智能 ， 只 有 当 浏 览 器 在 头 信息 中 告诉 它 自 
己 支 持 这 个 特性 时 ， 它 才 会 使 用 这 个 特性 。 而 且 ， 由 于 几乎 所 有 的 现代 浏览 器 都 支持 这 个 
特性 ， 因 此 很 容易 用 它 加 速 数据 传输 ， 尤 其 是 Apache 让 这 个 功能 的 启用 变 得 非常 简单 。 
它 能 够 提供 多 大 的 帮助 呢 ? 









































users.json 文件 的 大 小 为 13.5MB， 这 不 算 小 。 即 使 是 没有 经 过 充分 优化 的 图 片 ， 也 多 半 不 
会 超过 IMB。 因 此 ， 下 载 那 个 文件 会 严重 地 影响 性 能 。 图 7-2 显示 了 在 使 用 任何 压缩 技术 
之 前 ， 通 过 浏览 器 请 求 文件 时 ，Chrome 报告 的 JSON 文件 大 小 。 
































Size 

Content 
12.9MB 
12.9 MB 











7-2: Chrome 的 文件 请 求 报告 


7-3 显示 了 启用 Apache 压缩 功能 以 后 的 文件 大 小 。 





Size 
Content 
2.1 MB 
12.9 MB 











图 7-3: 没 错 ， 更 小 了 





差别 相当 惊人 。 记 住 ， 浏 览 器 还 要 在 客户 端 解 压 那 个 文件 ， 所 以 使 用 这 个 方法 时 要 谨慎 。 我 
仍然 不 建议 通过 网 络 发 送 超过 10MB 的 数据 。 至 少 在 我 们 的 例子 里 ， 这 是 起 初 “ 最 坏 情 况 
下 ”的 负载 ， 而 后 续 调用 (再 次 使 用 一 个 假想 的 应 用 程序 服务 器 ) 将 只 发 送 有 变化 的 数据 。 


现在 ,我 们 已 经 看 过 了 数据 ， 接 下 来 让 我 们 看 一 下 已 完成 的 应 用 程序 。 
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7.3 ”应 用 程序 


当 你 第 一 次 点 击 该 应 用 程序 时 ， 它 会 获取 初始 数据 集 (那个 很 大 的 JSON 文件 )， 并 开始 将 
其 插入 本 地 数据 存储 。 由 于 这 需要 一 点 时 间 ， 因 此 我 们 使 用 一 个 模 态 窗口 告诉 用 户 发 生 了 
什么 。 对 于 这 个 应 用 程序 ， 该 窗口 相当 简单 一 一 只 有 一 条 消息 (如 图 7-4 所 示 )。 你 可 以 改 
进 这 条 消息 ， 用 它 报告 应 用 程序 是 否 正 在 下 载 初始 数据 ， 或 者 是 否 已 经 开始 将 其 插入 本 地 
存储 。 
































Data Setup 


In order to use the employee directory we must update your local database with the most 
up to date information. Please stand by... 














图 7-4: 应 用 程序 设置 过 程 中 显示 的 消息 
当 所 有 数据 都 加 载 完 成 后 ， 用 户 会 看 到 一 个 基本 的 表单 ， 如 图 7-5 所 示 。 在 这 个 应 用 程序 
中 ， 你 只 能 使 用 名 和 姓 进 行 搜索 。 


Employee Directory 


First Name 








Last Name 











图 7-5: 搜索 框 


接 下 来 ， 你 可 以 开始 搜索 了 。 你 可 以 只 搜索 名 或 姓 ， 也 可 以 两 者 同时 搜索 。 图 7-6 展示 了 
部 分 搜索 结果 。 

即使 什么 也 没 找 到 ， 应 用 程序 也 会 让 你 知道 究竟 发 生 了 什么 。 总 之 ， 这 是 一 个 相当 简单 的 
界面 。 后 续 你 可 以 加 入 更 多 的 过 滤器 (比如 业务 部 门 或 经 理 )， 进 一 步 增强 搜索 功能 。 
许 你 会 好 奇 那些 图 片 的 出 处 ， 它 们 全 都 来 自 随 机 用 户 生 成 器 。 


我 们 已 经 讨论 了 数据 ， 并 展示 了 应 用 程序 界面 。 接 下 来 让 我 们 看 一 下 界面 背后 的 代码 。 
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Home 


Employee Directory 


First Name 


Last Name smith 





aaron smith 
Email: aaron.smith.yellowleopard890@gmail.com 
Phone: 011-077-5571 
人 Cell: 081-098-5118 
Location: 8255 denny street 
Tullamore, new york 72151 
alice smith 











Email: alice.smith.lazyfrog381@gmail.com 
Phone: 051-310-4940 
Cell: 081-143-1084 
Location: 1486 main street 
’ Sliao. connecticut 54886 


图 7-6: 搜索 结果 


7.4 代码 


该 应 用 程序 将 使 用 本 地 存储 和 IndexedDB。 本 地 存储 只 用 于 记录 数据 是 否 已 经 加 载 。 
IndexedDB 将 存储 数据 本 身 。 对 于 本 地 存储 ， 虽 然 这 里 的 用 法 相当 简单 ， 但 我 们 还 是 会 使 
用 Lockr。 对 于 IndexedDB ， 我 们 将 使 用 Dexie 简化 数据 插入 及 搜索 。 


首先 ， 让 我 们 看 一 下 应 用 程序 如 何 确定 数据 是 否 已 经 缓存 到 客户 端 。 示 例 7-2 展示 了 用 来 
确定 本 地 数据 是 否 存在 的 函数 。 














示例 7-2 haveData 国 数 
function haveData() { 
var def = $.Deferred(); 
var LastFetch = Lockr.get("LastDataSync'" ) ; 


if(LastFetch) def.resolve(true); 
else def.resolve(false); 


return def.promise(); 


} 


这 里 有 几 处 比较 有 趣 。 函 数 代码 的 第 一 行 创建 了 一 个 Deferred 对 象 ， 以 便 可 以 返回 一 个 
Promise 对 象 。 这 让 我 们 可 以 异步 地 使 用 这 个 函数 。 不 过 ， 我 们 实际 上 并 没有 使 用 异步 过 
程 。 我 们 已 经 知道 ， 本 地 存储 访问 是 同步 的 。 但 将 来 ， 我 们 可 能 会 更 新 这 个 过 程 ， 让 它 变 
成 异步 的 。 调 用 这 个 函数 的 代码 并 不 需要 修改 。 





目前 ， 我 们 的 代码 只 是 使 用 Lockr 检查 了 LastDatasync 属性 。 如 果 该 属性 存在 ， 则 表明 我 
们 已 经 有 了 数据 。 稍 后 ， 我 们 会 将 它 设 置 为 一 个 日 期 值 。 按 照 设想 ， 如 果 你 将 来 把 这 段 代 



































A 
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码 连 接 到 一 个 “真正 ”的 应 用 服务 器 上 ， 那 么 在 确定 你 所 需要 的 新 数据 时 ， 这 个 日 期 会 是 
一 条 非常 有 价值 的 信息 。 让 我 们 看 一 下 如 何 调用 这 段 代 码 (示例 7-3)。 














示例 7-3 调用 haveData 
haveData().then(function(hasData) { 
if(!hasData) { 
console.log("I need to setup the db."); 
setupData().then(appReady); 
} elsef{ 
appReady(); 


}); 


以 上 代码 调用 了 haveData()， 并 使 用 返回 对 象 Promise 的 then 方法 进行 应 用 程序 设置 ， 它 
会 在 数据 的 异步 加 载 过 程 完成 后 执行 。 没 错 ， 数 据 加 载 其 实 不 是 异步 的 ， 但 我 们 已 经 说 过 ， 
调用 者 无 需 担 心 那 个 问题 。 如 果 没 有 数据 ， 这 段 代码 就 会 激活 一 个 准备 数据 的 调用 ， 否 则 ， 
它 会 运行 一 个 国 数 ， 表 明 搜索 应 用 程序 已 经 准备 就 绪 。 让 我 们 看 一 下 数据 准备 函数 。 


首先 ，Dexie 需要 我 们 创建 一 个 IndexedDB 数据 库 ， 并 定义 存储 数据 的 对 象 存储 (示例 
7-4)。 这 是 在 代码 前 半 部 分 的 $(document) .ready 块 内 完成 的 。 



































示例 7-4 IndexedDB 准备 
myDb = new Dexie("empLoyee_database'" ) ; 
myDb.version(1).stores({ 
employees:"++id,&email,name.first,name.last" 


]); 
myDb .open( ) ; 





前 面 的 章节 已 经 介绍 过 ，Dexie 极 大 地 简化 了 IndexedDB 的 使 用 。 可 以 看 到 ， 正 在 创建 数 
据 库 和 对 象 存储 employees。employees 存储 有 一 个 自 增 的 数值 型 id、 一 个 建 在 email 上 的 
唯一 索引 以 及 建 在 name.first 和 name.last 上 的 索引 。 这 些 索 引 创 建 的 依据 是 我 们 计划 如 
何 查 询 员 工 。 现 在 ,我 们 看 一 下 准备 数据 的 函数 (示例 7-5)。 








一 | 

















示例 7-5 ”setupData 国 数 


function setupData() { 
var def = $.Deferred(); 


// 设 置 modat 选 项 
$("#setUpModal").modal({ 
keyboard: false 

]); 


// 现 在 显示 它 
$("#setupModal").modal("show"); 


// 现 在 ,获取 远程 数据 
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$.get("data/users.json", function(data) { 
console.log("Loaded JSON, have "+data.results.length+" records . 
console.dir(data.results[0].user); 


); 


myDb.transaction("rw", myDb.employees, function() { 
data.results.forEach(function(rawEmp) { 


/* 

我 们 没有 原样 复制 数据 ,而 是 稍微 修改 了 一 下 。 

特别 是 ,原始 数据 中 有 一 些 email 或 username 重 复 的 ， 

所 以 我 以 这 两 个 字段 为 基础 创建 了 新 的 email 

* 

/ 

var emp = { 
cell:rawEmp.user.cell, 
dob:rawEmp.user .dob, 
email:rawEmp.user .email.split("@")[0]+"." 
+ rawEmp.user.username + "@gmail.com", 
gender :rawEmp.user .gender, 
location:rawEmp.user.location, 
Name:rawEmp.user .name, 
phone:rawEmp.user .phone, 
picture:rawEmp.user.picture 














}; 


myDb .empLoyees.add(emp ) ; 
]); 


}).then(function() { 


// 隐 藏 nodal 
$s("#setupModal").modal("hide"); 


// 记 录 同 步 完 成 时 间 


Lockr .set("LastDataSync" ，new Date()); 
def .resoLve() ; 


}).catch(function(err) { 
console.log("error in transaction", err); 
}); 
}, "json"); 


return def.promise(); 


3 


如 你 所 想 ， 这 是 一 个 大 函数 。haveData 函数 使 用 jQuery Deferred 来 处 理 数 据 准 备 过 程 的 
异步 性 。 和 暂且 抛 开 UI 元 素 不 谈 (Bootstrap 让 其 变 得 非常 简单 ) ， 最 关键 的 部 分 始 于 通过 
AJAX 调用 获取 JSON 文件 。 一 旦 取得 该 文件 ，Dexie 就 会 打开 一 个 事务 。 对 于 JSON 数 
据 中 的 每 个 用 户 ， 我 们 需要 新 建 一 个 对 象 来 进行 存储 。 在 理想 情况 下 ， 数 据 应 该 与 我 们 希 
望 存储 的 数据 完全 一 样 ， 但 由 于 我 们 使 用 了 从 随机 用 户 生 成 器 中 获取 的 数据 ， 因 此 需要 稍 
作 修 改 。 如 果 你 安装 了 一 台 应 用 服务 器 为 代码 提供 类 似 的 数据 ， 那 么 你 会 希望 提供 的 数据 
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尽 可 能 与 需求 保持 一 致 。 注 意 ， 我 们 





ey 


肖 微 修改 了 邮件 地 址 ， 因 为 在 随机 用 户 数 据 中 ， 邮 件 























地 址 不 唯 








。 这 很 可 能 是 原 API 的 一 个 bug， 不 过 ， 使 用 JavaScript 绕 过 这 个 问题 更 容易 。 





然后 ， 添 




















加 对 象 一 一 就 是 这 样 。 当 事务 结束 时 ，UI 会 再 次 更 新 ， 而 前 面 声 明 的 Deferred 对 




















象 的 resolve 方法 会 被 调用 。 注 意 ， 最 后 一 步 是 使 用 当前 时 间 更 新 本 地 存储 ， 这 还 是 通过 
Lockr 实现 的 。 








示例 7-6 


现在 ， 让 我 们 转 到 搜索 。 在 数据 加 载 完 成 或 者 已 经 确定 数据 存在 后 ，appReady 函数 会 被 调 
用 ， 如 示例 7-6 所 示 。 


appReady 国 数 


function appReady() { 


} 


console.log('appReady fired, lets do this'); 
// 显 示 搜 索 表 单 
$("#searchFormDiv").show(); 

$("#searchForm").on("submit", doSearch); 





这 里 没有 多 少 内 容 可 以 介绍 ， 主 要 是 显示 搜索 表单 ， 以 及 注册 执行 那个 搜索 的 事件 处 理 
器 。 让 我 们 看 一 下 示例 7-7。 


示例 7-7 doSearch 国 数 


function doSearch(e) { 


e.preventDefault(); 
var fName = $.trim($firstNameField.val()); 
var LName = $.trim($lastNameField.val()); 


$results.empty(); 
console.log('search for -'+fName+'- -'+lName); 


var fnEmps = []; 
var lnEmps = []; 
myDb.transaction('r', myDb.employees, function() { 


if(fName !== '') { 
myDb.employees.where("name.first").startsWithIgnoreCase(fName) 
.each(function(emp) { 
fnEmps .push(emp); 


})); 
} 
if(LName !== '') { 
myDb.employees.where("name.last").startsWithIgnoreCase(lName) 
.each(function(emp) { 
lnEmps .push(emp); 
}); 
} 


}).then(function() { 
console. log( 'done'); 
var results = []; 
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// 只 提供 了 名 
if(fName !== '' && LName === '') { 
console.log('first'); 
fnEmps.forEach(function(emp) { results.push(emp); }); 





// 只 提供 了 姓 
} else if(lName !== '' && fName === '') { 
LnEmps .forEach(function(emp) { results.push(emp); }); 
// 两 者 都 提供 了 
} else { 


// 仅 返回 在 两 个 列表 中 都 存在 的 对 象 
// 简 单 起 见 , 我 们 为 LnEmps 中 的 email 值 创建 一 个 索引 
// 那 样 ,我 们 就 可 以 在 遍历 fnEmps 时 更 快 地 检查 它们 


var lnEmails = []; 


























lnEmps.forEach(function(emp) { lnEmails.push(emp.email); 


results = fnEmps.filter(function(emp) { 
return lnEmails.indexOf(emp.email) >= 0; 
}); 
} 


// 开 始 泻 染 结果 
if(results.length) { 
results.forEach(function(r) { 
console.log(r.name.first+' '+r.name.last); 
var result = resultTemplate(r); 
$results.append(result); 


}); 
} else { 
$results.html("Sorry, nothing matched your search."); 


} 


}).catch(function(err) { 


}); 


} 


这 又 是 一 个 大 函数 ， 因 此 ， 让 我 们 一 步 一 步 地 分 析 。 首 先 ， 获 取 搜 索 表 单 


console.log('error', err); 








3 


中 的 当前 字段 并 


去 掉 空格 。 一 旦 取得 了 这 些 字段 ， 就 可 以 开始 搜索 了 。 遗 憾 的 是 ， 我 们 无 法 在 一 次 调用 中 
同时 搜索 两 个 值 ， 但 我 们 可 以 在 一 个 事务 中 完成 。 所 以 ， 我 们 再 次 使 用 Dexie 提供 的 函数 


打开 一 个 


























和 务 ， 然 后 分 别针 对 名 索引 和 姓 索 引进 行 搜索 ， 搜 索 结果 存储 在 单独 的 数组 中 。 





事务 结束 意味 着 两 次 搜索 (如 果 只 用 了 一 个 搜索 字段 ， 则 为 一 次 搜索 ) 都 已 经 完成 。 然 
后 ， 我 们 需要 合并 结果 。 如 果 没 有 同时 使 用 两 个 字段 ， 则 情况 很 简单 : 所 搜索 的 字段 的 结 
果 数 组 会 被 复制 到 最 终 的 结果 数组 。 


如 有 果 同 时 使 用 了 两 个 字段 ， 则 情况 要 稍微 复杂 一 些 。 我 们 希望 返回 在 两 个 
在 的 结果 。 我 们 通过 遍历 LnEmps 数组 ， 创 建 一 个 只 包含 邮件 地 址 的 更 简 六 


遍历 fnEmps 数组 ， 并 且 只 





























结果 数组 中 都 存 
的 数组 。 然 后 ， 





关 受 那些 邮件 地 址 在 搜索 姓 的 结果 中 也 存在 的 值 。 





92 | 第 7 章 


终于 ， 结 果 集 准备 就 绪 。 我 们 如 何 展示 呢 ? 为 了 简化 将 内 容 动态 写 出 到 模板 的 过 程 ， 我 们 
将 使 用 Handlebars 作为 客户 端 模板 语言 。Handlebars 让 我 们 可 以 使 用 变量 标识 定义 一 个 模 
板 。 我 们 可 以 加 载 这 个 模板 ， 自 动 替 换 标 识 ， 然 后 泻 染 出 HTML。index.html 定义 了 处 理 
搜索 结果 的 模板 (如 示例 7-8 所 示 ) 。 


示例 7-8 结果 模板 


<script id="re 
<div class="pa 
<div class 
<h3 cl 

</div> 
<div class 
<div c 
<d 


</ 
<d 














sult-template" type="text/x-handlebars-template"> 
nel panel-primary"> 

="panel-heading"> 
ass="panel-title">{{name.first}}{{name.last}}</h3> 


="panel-body"> 
lass="row"> 
iv class="col-md-2"> 
<img src="{{picture.medium}}" class="img-rounded"> 
div> 
iv class="col-md-10"> 
<table style="width:100%"> 
<tr> 
<td><b>Email:</b></td> 
<td><a href="mailto:{{email}}">{{email}}</a></td> 
</tr> 
<tr> 
<td><b>Phone:</b></td> 
<td>{{phone}}</td> 
</tr> 
<tr> 
<td><b>Cell:</b></td> 
<td>{{cell}}</td> 
</tr> 
<tr valign="top"> 
<td><b>Location:</b></td> 
<td>{{location.street}}<br/> 
{{Llocation.city}}, {{location.state}} {{location.zip}}</td> 
</tr> 
</table> 


</div> 


</div> 
</div> 
</div> 
</script> 


可 以 看 到 ， 在 上 面 自 
Handlebars 可 以 处 至 


的 代码 清单 中 ， 每 个 标识 作为 一 个 值 都 包含 在 双重 花 括 号 ({{ 二 ) 中 。 








这 些 标识 ， 并 使 用 搜索 出 的 实际 结果 数据 替换 它们 。 客 户 端 模板 语言 


的 好 处 是 极 大 地 简化 了 从 Javascript 动态 生成 输出 的 过 程 。 


7.5 总结 


你 可 以 在 下 载 的 zip 文件 中 找到 演示 程序 的 完整 代码 。 我 强烈 建议 你 自己 尝试 一 下 ， 看 看 


可 以 作 些 什么 修改 。 





你 可 以 添加 更 多 的 搜索 筛选 条 件 。 如 果 你 真 的 愿意 ， 也 可 以 安装 一 个 


应 用 服务 器 ， 着 手 开 发 一 个 “只 发 送 变化 内 容 ” 的 API。 视 你 好 运 | 
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作者 介绍 

Raymond Camden 是 IBM 的 一 名 Developer Advocate， 关 注 MobileFirst 平台 、Bluemix、 混 合 
移动 开发 、Node.js、HTML5 和 Web 标准 。 他 也 是 一 名 作家 ， 并 在 许多 会 议和 用 户 组 中 做 过 
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封面 介绍 
本 书 封面 上 的 动物 是 无 纹 地 松鼠 (南非 地 松鼠 )。 无 纹 地 松鼠 原生 于 非洲 之 角 的 干旱 草原 
和 灌木 从 。 作 为 地 松鼠 ， 它 们 在 地 下 穴居 。 





无 纹 地 松鼠 有 棕色 的 皮毛 ， 后 背 颜色 深 ， 前 面 颜 色 浅 。 顾 名 思 义 ， 它 们 背 上 没有 在 其 他 非 
洲 地 松鼠 属 动物 身上 常见 的 白色 条 纹 。 无 纹 地 松鼠 的 体重 可 以 长 到 0.45 千克 ， 身 长 可 达 
25 厘米 。 此 外 ， 它 们 的 尾巴 也 可 以 长 到 25 厘米 。 


无 纹 地 松鼠 是 杂食 性 动物 ， 树 时、 有 果实、 种子 和 昆虫 都 是 它们 的 食物 。 它 们 大 部 分 时 间 邦 
在 寻找 食物 ， 只 有 在 睡觉 时 才 回 到 巢穴 。 它 们 的 主要 天 敌 是 猛禽 、 狗 、 儿 和 蛇 。 


OReilly 图 书 封面 上 的 许多 动物 都 已 濒临 灭绝 。 对 于 这 个 世界 而 言 ， 它 们 都 很 重要 。 要 想 
了 解 更 多 有 关 如 何 为 它们 提供 帮助 的 信息 ， 请 访问 animals.oreilly.com 。 


封面 图 片 来 自 Lydekker 的 Royal Natural History。 
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客户 端 存储 技术 


现代 浏览 器 的 一 大 实用 特性 是 有 能 力 将 数据 直接 存储 在 用 户 的 计算 机 或 
移动 设备 上 。 尽 管 许 多 人 选择 将 数据 迁移 至 云端 ， 但 若 使 用 得 当 ， 客 户 
端 存储 仍然 可 以 帮助 Web 开 发 人 员 节 省 大 量 的 时 间 和 金钱。 本 书 结合 丰 
富 的 实例 ， 详 解 多 种 客户 端 存储 技术 。 你 将 了 解 如 何 及 何 时 使 用 它们 、 
其 优 缺点 以 及 在 应 用 程序 中 使 用 其 中 一 种 或 多 种 技术 的 步骤。 


本 书 还 介绍 了 几 种 简化 客户 端 存 储 的 开源 库 ， 非 常 适 合 熟悉 JavaScript 的 
Web 开 发 人 员 。 


四 了 解 不 同 浏览 器 对 每 种 客户 端 存储 技术 的 支持 情况 

加 使 用 Web 存 储 〈 即 本 地 存储 ) 存储 列表 和 偏好 设置 等 简单 信息 
加 使 用 IndexedDB 存 储 几 乎 任何 你 希望 在 用 户 浏览 器 中 存储 的 信息 
田 了 解 如 何 为 仍旧 使 用 Web SQL 的 Web 应 用 提供 支持 

目 研究 三 个 可 以 简化 客户 端 存储 的 库 : Lockr、Dexie 和 localForage 
目 使 用 多 种 存储 技术 构建 一 个 简单 可 用 的 应 用 程序 
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混合 移动 开发 、Nodejs、HTML5 和 Web 标 准 。 他 也 是 一 名 作家 ， 并 在 许 
会 议和 用 户 组 中 做 过 各 种 主题 的 演讲 。 欢 迎 访问 他 的 博客 : http://www. 
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论 平 台 是 桌面 、 移 动 Web， 还 
是 混合 移动 。Camden 完 成 了 一 
项 了 不 起 的 工作 ， 他 不 仅 全 面 
呈现 了 可 供 开发 人 员 选 用 的 技 
术 ， 还 提供 了 实例 ， 让 这 个 话 
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